Axios post方法React。國家終極版沒有更新

Question

我Redux 有問題，State這是我axios要求

case 'REGISTER_USER':{ 

    var userData = {username: action.payload.username, password : action.payload.password}; 

    axios({ 
    method: 'post', 
    url: 'php/register.php', 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    data: userData 
    }).then(function(response) { 
    state.error = response.data.errors; 
    state.success = response.data.success; 
}); 
    return {state}; 
    break; 
    }//end REGISTER_USER 

默認state.error，state.success是空array。 第一次點擊後state.error仍然是空數組，因爲axois沒有完成請求。第二次點擊後，一切都很好。

，在這裏我有道具的問題：

{this.props.error.length>0? <div className="alert alert-danger">{this.props.error[0]}</div>: ''} 

和存儲：

@connect((store)=>{ 
    return{ 
    error: store.app.error, 
    success: store.app.success, 
    } 
}) 

不要ü知道我可以axios method post完成後，新的Props渲染component。

Answer 1

我想你已經寫了這個代碼到減速機，API調用應內行動Dispacher來完成。 api成功調用後，您必須將數據發送到Reducer。在reducer中，您應該只分配Reducer內的Data，No API Calls。

例如，

行動調度

export function APIDispatch(data) 
{ 
    return{ 
     type:'API_DATA_RECD',     
     data:data 
    } 
} 

export function callAPI(){ 
    return function(dispatch){ 
     axios({ 
      method: 'post', 
      url: 'php/register.php', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: userData 
      }).then(function(response) { 
      state.error = response.data.errors; 
      state.success = response.data.success; 
      dispatch(APIDispatch(state)) 
     }); 

    } 
} 

減速

case 'API_DATA_RECD': 
    { 
     // you will get data from action.data 
    } 

Answer 2

Axios在異常情況下發出ajax請求，在REGISTER_USER的情況下，它立即返回帶有狀態屬性的對象的代碼段，同時請求仍然處於掛起狀態，這意味着該對象沒有任何有意義的值。只有當您完成的請求完成時，您才應該返回值。

試試這個：

case 'REGISTER_USER':{ 

    var userData = {username: action.payload.username, password : action.payload.password}; 

    axios({ 
    method: 'post', 
    url: 'php/register.php', 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    data: userData 
    }).then(function(response) { 
    state.error = response.data.errors; 
    state.success = response.data.success; 

    return {state} 
}); 
    break; 
    }//end REGISTER_USER