Question

我在State Redux遇到问题这是我的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,
  }
})

你知道我在component完成后如何使用新的Props呈现axios method post。

Answer 1

我认为您已将此代码写入reducer，api调用应在 Action Dispacher 内完成。 api成功调用后你必须将数据发送到reducer。在reducer中，您应该只在Reducer中分配Data，而不是API调用。

例如。

行动调度员

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的情况下，它正在返回具有state属性的对象的代码片段，同时请求仍处于未决状态，这意味着该对象没有任何有意义的值。只有在您完成的请求完成后，您才应该返回值。

试试这个：

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

Axios post方法React。 State Redux没有更新

2 个答案: