将 axios 发布到 reducer 时反应得到空数组

Question

我在使用 axios post 方法时无法在 action.payload.data 中取回数据时遇到问题。

在注册页面上，我在提交表单时触发了操作

  onSubmit(props) {
    this.props.signUpUser(props)
      .then(() => {
      this.context.router.push('/');
      });
  }

在动作文件中

export function signUpUser(props) {
    console.log("props", props);
    const request = axios({
        url: 'http://localhost:3000/api/users',
        method: 'post',
        data: props
    })

当我console.log它显示的道具时

 props Object {username: "11", email: "1", password: "1", passwordConfirmation: "1"}

但是当我在 reducer 上进行控制台登录时。我在 object.config.adapter 中获取数据而不是 object.data.

export default function(state = INITIAL_STATE, action) {
    switch(action.type) {
        case SIGN_UP_USER:
            console.log(action.payload);
            return action.payload.data;
        default:
            return state;
    }
}

当我检查我的数据库时，我可以看到数据正常，但不确定为什么当我调用 payload.data 时我得到空数组。我的目标是将注册用户的信息存储到 reducer 中，以便在他们注册后显示他们的信息。

Answer 1

你在哪里派遣行动？

改变你的承诺

.then((data) => {
      dispatch({type:'SIGN_UP_USER', payload:data})//you have to pass dispatch to the function call
      this.context.router.push('/');
      });
  }

您必须将其设置为属性值。

尝试

return Object.assign(state, {data:action.payload.data})

或使用 es6 语法

return { ...state, data:action.payload.data }

Answer 2

您确定您的 API 正在返回任何数据吗？在我看来，您的代码按预期工作，但您的 API 未返回任何数据。我认为这不是 react/redux 问题。

您所指的 data 对象， {username: "11", email: "1", password: "1", passwordConfirmation: "1"} 是 post TO API 正文中的数据。

你应该看看你的 API/user 控制器，看看为什么它没有在响应中返回数据。

将 axios 发布到 reducer 时反应得到空数组

React getting empty array when posting axios to reducer

javascript

reactjs

axios

reducers