使用给定的用户 id 上下文更新对象道具 api react答案

【问题标题】：updating object props with given users id context api react使用给定的用户 id 上下文更新对象道具 api react
【发布时间】：2021-08-31 02:24:48
【问题描述】：

我正在尝试使用上下文 API 更新用户数据 - 我让它工作了，所以它根据他们的 userId 单独执行它 - 所以从这个意义上说

如果我想更新用户的头像，我可以这样做

case 'UPDATE_USER_AVATAR':
      const { userId, avatar } = action.user

      const user = {
        ...state.users.find((c: User) => c.userId === userId),
        avatar,
      }

      return {
        ...state,
        users: state.users.map((c: User) => {
          return c.userId !== userId ? c : user
        }),
      }

然后我像这样更新用户名

case 'UPDATE_USER_NAME':
      const { user_id, name } = action.user

      const userName = {
        ...state.users.find((c: User) => c.userName === user_id),
        name,
      }

      return {
        ...state,
        users: state.users.map((c: User) => {
          return c.userName !== user_id ? c : userName
        }),
      }

这对我有用，但现在我无法添加更多内容 - 例如，我想添加可能更改用户的电话号码或其他内容 - 我必须为此创建另一个新的减速器 - 有吗一种我可以在一个减速器中完成这一切的方法，而不是为不同的情况创建多个？

【问题讨论】：

标签： reactjs redux reducers context-api

【解决方案1】：

您只能编写一个函数来更新用户信息，如下所示：

case 'UPDATE_USER':
  const { user_id, ...userInfor } = action.user

  return {
    ...state,
    users: state.users.map((c: User) => {
      return c.userName !== user_id ? c : {...c, ...userInfor}
    }),
  }

【讨论】：

【解决方案2】：

像这样解构你的action.user。

const { user_id, ...other } = action.user

然后像这样创建一个用户对象。

const user = {
  ...state.users.find((c: User) => c.userName === user_id),
  ...other 
};

最后，像往常一样将它传递给map。

return {
  ...state,
  users: state.users.map((c: User) => {
    return c.userName !== user_id ? c : user // Pass user object to here.
  }),
}

现在您可以随意传递有关用户的任何信息。

如果您需要有关 JavaScript 解构的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

如果您需要进一步的支持，请告诉我。

【讨论】：

感谢工作也很好 - 谢谢！