通过 useState 更新 state 后，React 组件未呈现

Question

我想更新一个 state object userInfo ，其中包含一个名为work的数组，它是一个对象数组

我的数据库 object userInfo看起来像这样

{
"_id":"61a6a1d64707c03465eae052",
"fullName": "Md Nurul Islam",    
"works": 
[
    {
    "isEditing": false,
    "_id": "61a6a1d64707c03465eae053",
    "company": "Amazon Logistics",
    "position": "Sortation Associate",
    "isCurrent": true
    }, 
    {
        "isEditing": false,
        "_id":"61a6a1d64707c03465eae054",
        "company": "The Rani Indian Takeway",
        "position": "Customer Service Assistant",
        "isCurrent": false,
    }
]    
}

但是我不想更新数据库，我只想将前端的 state userInfo更新为 go 编辑心情，为此，当用户单击工作部分旁边的编辑时，属性isEditing将被切换。

下面是我的代码

const [userInfo, setUserInfo] = useState(user);
const workToggleHandler = (work) => 
{
  setUserInfo((prev) => {
  prev.works.map((p) => {
    if (p._id === work._id) {
      p.isEditing = !p.isEditing;
    }
    return p;
  });
  return prev;
});

使用此代码，我的 state object 被更新但我的组件没有重新渲染

Answer 1

React 不会查看 object 的数据，而是查看 object 的指针。 由于这没有改变（只有“prev”被编辑，没有新的 object 地址的新 object），它不会重新渲染。 一个解决方案是复制 object。

 let newUserInfo = Object.assign({}, prev); newUserInfo.works.map((p) => { if (p._id === work._id) { p.isEditing =.p;isEditing; } return p; }); return newUserInfo;

免责声明：也许需要深拷贝......

Answer 2

我刚刚更改了workToggleHandler function 上的代码，它完全按照我的意愿工作。 在我的代码下面

const [userInfo, setUserInfo] = useState(user);
const workToggleHandler = (work) => {
setUserInfo({
  ...userInfo,
  works: userInfo.works.map((p) => {
    if (p._id === work._id) {
      p.isEditing = !p.isEditing;
    }
    return p;
  }),
});
};

Answer 3

您可以在特定 state 更新时放入 useEffect 然后该效果将调用

useEffect(()=>{ 您的代码将在此处为 go }[userInfo])，