有没有办法在react中更新reducer中的特定数组对象？答案

【问题标题】：Is there any way to update a specific array object in reducer in react?有没有办法在react中更新reducer中的特定数组对象？
【发布时间】：2021-11-15 15:48:57
【问题描述】：

在这里，我正在尝试使用 reducer 更新我的状态数据。我通过分派发送一个对象，该对象由 id 和一些数据组成。通过这个 id，我正在尝试更新我的状态的特定对象。我的状态减速器是，

case "UPDATE_USER_SUCCESS":
      return {
        ...state,
        users: state.users.map((user) => {
          if (user.id !== action.payload.id) {
            return user;
          } else {
            return {
              ...user,
              ...action.payload,
            };
          }
        }),
      };

这里是动作，

export const updateUser = (updatedUser) => (dispatch, getState) => {
  dispatch({
    type: "UPDATE_USER_SUCCESS",
    payload: updatedUser,
  });
  console.log(updateUser);
  localStorage.setItem(
    "Users",
    JSON.stringify(getState().addUserReducer.users)
  );
};

我的调度是从这里开始的，

const formHandler = (e) => {
    e.preventDefault();
    dispatch(updateUser(updatedUser));
    console.log(name + email + phone + roles);
  };

【问题讨论】：

你在哪里使用这个users数组？请也分享该组件的代码，以及您如何调度此操作的代码。
这里的地图功能可以吗？
地图功能一目了然。您面临的问题是什么？
map 函数似乎正确
请再检查一遍，我已经添加了我的动作和调度功能。

标签： javascript reactjs redux react-redux state

【解决方案1】：

    return {
              ...user,
              ...action.payload,
            };

你在这里的目标是什么？如果 user 是一个数组，通过使用此代码，您可以将 action.payload 添加到您的数组中。但是用户是一个对象。如果你想传递另一个对象给它，你必须给它一个键：

    return {
              ...user,
              whateverkey:action.payload,
            };

并且您的用户对象有一个新的键值对。此外：如果您想要更轻松地访问，您也可以使用它：


    return {
              ...user,
             id:action.payload.id,
             name:action.payload.name,
             address:action.payload.address

            };

【讨论】：

传播语法 (...action.payload) 在这里完全有效地传播来自 action.payload 的键值。
这对我来说非常有效，我手动添加了键值对。谢谢。
@DrewReese 我测试了它，结果如下。这有效：const ob = { name: "sobhan", lastname: "jahanmard", }; const obb = { name: "sobhann", lastname: "jahanmardd", }; const func = () => { return { ...ob, whatevername: obb }; }; console.log(func()); 但如果您将返回更改为此，它不会。 return { ...ob, ...obb};