javascript - 使用 Axios 和 Redux 更新用户字段

Question

我有一个用户模型，其中有一个名为 favorites 的数组字段

const userSchema = new mongoose.Schema({  username: { type: String, unique: true },  firstName: String,  email: String,  passwordHash: String,  favorites: [Array]});

如果用户点击某个项目，我希望将该项目保存在用户的“收藏夹”字段中

这是我在 map 中处理 onClick 的按钮，其中 card 是用户单击的单个项目。

我还有一个名为loggedUser的状态，它保存当前登录用户的状态。

onClick={addFavorite(card, props.loggedUser)}

和 addFavorite 处理程序:

const addFavorite = (card, user) => {
    props.updateUser(card, user);
  };

然后是我的“userReducer”文件中的操作创建者，它采用卡和用户变量

 

export const updateUser = (card, user) => {
  return async dispatch => {
    dispatch({
      type: "UPDATE_USER",
      data: {
        card: card, user: user
      }
    });  

通过我的 reducer ，我将单击的用户变量保存在 userToChange 变量中。然后，我尝试将卡片数据连接到用户的收藏夹数组中。

   const userReducer = (state = [], action) => {
  switch (action.type) {
    case "NEW_USER":
      return [...state, action.data];
    case "UPDATE_USER":
      console.log("Action Data", action.data);
      const userToChange = action.data.user;
      console.log("User to Change", userToChange);
      const changedUser = userToChange.favorites.concat(action.data.card);
      userService.update(changedUser);
      return action.data;
    case "DELETE_USER":
      const removeObject = action.data;
      return state.filter(user => user.id !== removeObject.id);
    case "INIT_USERS":
      return action.data;
    default:
      return state;
  }
};

当我点击收藏夹按钮时 - 我收到此错误:无法读取指向 reducer 中这一行的未定义属性“user”:

 const userToChange = action.data.user;

注意这里也是我的 axios put 调用

const update = async user => {
  const response = await axios.put(`${baseUrl}/${user.id}`, user);
  return response.data;
};

以及我的快速路线:

userRouter.put("/:username", async (request, response, next) => {
  const body = request.body;
  const updateUser = {
    favorites: [body.favorites]
  };
  console.log("updateUser", updateUser);
  console.log("id", request.params.id);
  try {
    await User.findOneAndUpdate(username, updateUser, {
      new: true
    });
    response.status(204).end();
  } catch (error) {
    next(error);
  }
});

我可能哪里出错了？

Answer 1

你能发布完整的 reducer 吗？

定义中应该有这样的内容:

function reducer (state = initialState, action) {
  const { type, response, payload, data } = action
....

也许你没有在reducer函数中定义action参数，当然你的reducer不知道“action.data”是什么意思

---- 已编辑 ---- 您是在有状态组件还是无状态组件中执行此操作？也许你打错了电话。

如果您使用的是无状态，请执行以下操作:

onClick={() => props.addFavorite(card, props.loggedUser)}

如果您使用的是有状态的，请执行以下操作:

onClick={() => this.props.addFavorite(card, this.props.loggedUser)}