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