使用 useState 更新深层嵌套状态无法正常工作

Question

我按照这个线程中的答案尝试更新我在 React 中深度嵌套的对象。 React: Setting State for Deeply Nested Objects w/ Hooks

在那里看起来像一个魅力的东西，在我执行以下操作时会以某种方式破坏：

我有一个表格，其中填充了来自这样定义的数组中的项目：

const [items, setItems] = useState([
{
  selected: false,
  title: 'Item 1',
  status: 'new'
},
{
  selected: false,
  title: 'Item 2',
  status: 'used'
},
]);

当从该列表中选择一个项目时，会调用此函数来更新索引为 i 的对象的 selected 变量，如下所示：

const select = (e) => {
  const i = e.target.getAttribute('data-index');
  setItems((prevState) => {
    prevState[i].selected = !prevState[i].selected;
    return [...prevState];
  });
};

这只会工作一次。如果我第二次触发select 或之后的任何时间return [...prevState] 以某种方式保持状态不变。 （selected 永远保持 true）。我无法解决这个问题。

items 附加到组件List，如下所示：

<List
   items={items}
/>

在List 内部（缩写代码）：

{items.map((item, i) => {
      return (
        <tr className="list-table-tr">
          {hasSelector ? (
            <td className="list-table-td-selector">
              {item.selected ? (
                <div
                  data-index={i}
                  className="global-selector-selected"
                  onClick={select}
                ></div>
              ) : (
                <div
                  data-index={i}
                  className="global-selector-unselected"
                  onClick={select}
                ></div>
              )}
            </td>
          ) : null}

Answer 1

你打破了 React 状态的主要规则之一：你直接修改状态对象，而不是复制。

要正确进行更新，您应该这样做：

const select = (e) => {
    const i = e.target.getAttribute('data-index');
    setItems((prevState) => {
        // Copy the array (your code was doing that)
        const update = [...prevState];
        const item = update[i];
        // Copy the object (your code wasn't doing that) and update its
        // `selected` property
        update[i] = {...item, selected: !item.selected};
        return update;
    });
};

注意both数组和对象是如何被复制的，而不仅仅是数组。