使用 Axios 和 Redux 更新用户字段

Question

我有一个用户模型，其中包含一个名为收藏夹的数组字段

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

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

这是我在地图中处理 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
      }
    });  

使用我的减速器，我将单击的用户变量保存在 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;
  }
};

当我点击最喜欢的按钮时 - 我收到此错误：无法读取未定义的属性“用户”指向减速器中的这一行：

 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)}