無法通過AJAX調用操作

Question

我有一個綁定到操作的反應組件。我從這個組件調用api，並且我希望在api成功之後，我應該將響應傳遞給這些操作。目前，我做這樣的

在成功我通過它setAuthToken

class LogInComponent extends Component { 

    static contextTypes = { 
     router: PropTypes.object.isRequired 
    } 
handleLoginButtonClick() { 
     let token; 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": "https://example-backend.appspot.com/auth/login/", 
      "method": "POST", 
      "credentials": 'include', 
      "headers": { 
       "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": { 
       "password": document.getElementById("password").value, 
       "username": document.getElementById("username").value 
      }, 
      success: function(response, textStatus, jQxhr){ 
       this.props.setAuthToken(response.auth_token) 
      }, 
     } 

     $.ajax(settings).done((response) => { 
      token = response.auth_token 
      console.log('check'); 
      this.context.router.push('/app') 
     }); 

} 

render(){ 
     return (
      <div className="LoginPage"> 
       <div className="login-page"> 
        <div className="form"> 
         <form className="login-form"> 
          <input id="username" type="username" placeholder="username"/> 
          <input id="password" type="password" placeholder="password"/> 
          <p className="message">Not registered? <a href="#">Request Username and Password</a></p> 
         </form> 
         <button onClick={this.handleLoginButtonClick.bind(this)}>login</button> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({setAuthToken: actions.setAuthToken}, dispatch); 
} 


export default connect(null, matchDispatchToProps)(LogInComponent} 

到我的行動的響應，並且這是data.js在那裏我有我所有的行動和減速器

import fetch from 'isomorphic-fetch' 

    const INITIAL_STATE = { 
     list: [], 
     selectedRows: [], 
     currentItem: {}, 
     auth_token:null 
    } 

    const FETCH_LIST = 'FETCH_LIST' 
    const fetchList =()=> (dispatch)=> { 
     dispatch({type: FETCH_LIST}); 
     fetch('/api/items?n=1') 
      .then(resp => resp.json()) 
      .then(data => dispatch(fetchListSuccess(data))) 
      .catch(err => dispatch(fetchListError(err))) 
    } 


    const FETCH_LIST_SUCCESS = 'FETCH_LIST_SUCCESS' 
    const fetchListSuccess = (list)=> { 
     console.log('Received List: ', list) 
     return { 
      type: FETCH_LIST_SUCCESS, 
      list 
     } 
    } 

    const FETCH_LIST_ERROR = 'FETCH_LIST_ERROR' 
    const fetchListError = (error)=> { 
     console.error(error) 
     return { 
      type: FETCH_LIST_ERROR, 
      error: error.message 
     } 
    } 


    const SELECT_ROWS = 'SELECT_ROWS' 
    const selectRows = (ids)=> { 
     return { 
      type: SELECT_ROWS, 
      ids 
     } 
    } 

    const SET_AUTH_TOKEN = 'SELECT_ROWS' 
    const setAuthToken = (token)=> { 
     return { 
      type: SET_AUTH_TOKEN, 
      payload: token 
     } 
    } 

    const SET_CURRENT_ITEM = 'SET_CURRENT_ITEM' 
    const setCurrentItem = (item)=> { 
     return { 
      type: SET_CURRENT_ITEM, 
      item 
     } 
    } 


    export const actions = { 
     fetchList, 
     selectRows, 
     setCurrentItem, 
     setAuthToken 
    } 


    export default function DataReducer(state = INITIAL_STATE, action){ 
     switch(action.type){ 
      case FETCH_LIST: 
       return {...state, isLoading: true } 
      case FETCH_LIST_SUCCESS: 
       return { ...state, isLoading: false, list: [...action.list] } 
      case FETCH_LIST_ERROR: 
       return {...state, isLoading: false, hasError: action.error } 
      case SELECT_ROWS: 
       return {...state, selectedRows: [...action.ids]} 
      case SET_CURRENT_ITEM: 
       return {...state, currentItem: {...action.item}} 
      case SET_AUTH_TOKEN: 
       return {...state, auth_token:action.payload} 
      default: 
       return state 
     } 
    } 

我得到這樣的錯誤

下面試圖解決後

錯誤

Answer 1

jQuery的回調「成功」 this沒有指向你的反應組件

handleLoginButtonClick() { 
    let token; 
    var that = this; //Save a reference to 'this' using scope defined 'that' 

    var settings = { 
     "async": true, 
     "crossDomain": true, 
     "url": "https://example-backend.appspot.com/auth/login/", 
     "method": "POST", 
     "credentials": 'include', 
     "headers": { 
      "content-type": "application/x-www-form-urlencoded", 
     }, 
     "data": { 
      "password": document.getElementById("password").value, 
      "username": document.getElementById("username").value 
     }, 
     success: function(response, textStatus, jQxhr){ 
      // Using 'that' since 'this' belongs to jQuery 
      that.props.setAuthToken(response.auth_token) 
     }, 

    /* ... */ 

    } 
}