Question

我有函数组件 TaskManager，它使用 useState 钩子来保持状态。

const TaskManager = () => {
  const [sections, setSections] = useState({
    sectionArr: [{}, {}, {}],

    taskArr: [...],
  });

  return(
    ...
  );
};

然后从 TaskManager 我将我的 setSections func 传递给子组件 DeleteSectionButton

function DeleteSectionButton({ sectionID, sections, setSections }) {
  const handleClick = () => {
    const updatedSectionArr = sections.sectionArr.filter(
      (sect) => sect.id !== sectionID
    );
    const updatedState = sections;
    updatedState.sectionArr = updatedSectionArr;

    setSections(updatedState);
  };
  return (
    ...
  );
}

这样我就可以通过 TaskManager 更新 setSections 的状态。但是在我使用 TaskManager 后，setSections 组件实际上并没有重新渲染，这对我来说很奇怪。但是，如果我 console.log TaskManager 的状态 - 我看到它实际上发生了变化。那么为什么 setSections 不会导致 TaskManager 的重新渲染？

顺便说一句：DeleteSectionButton 以下一种方式更改状态 - 它从 sectionArr 数组中删除一个元素，就是这样。它不会直接影响 sectionArr 的值。这可能与这种奇怪的行为有关吗？因为当我将一些完全不同的东西作为 secSections 的参数（例如 0）时 - 那么 TaskManager 会正常重新呈现。

Answer 1

不要改变从父级获取的相同 prop 对象，而是将新对象返回给 setSections。

const handleClick = () => {
    const updatedSectionArr = sections.sectionArr.filter(
      (sect) => sect.id !== sectionID
    );

    setSections({ ...sections, sectionArr: updatedSectionArr });
};

这将每次向 setSections 返回新的对象引用。

Answer 2

好吧，我通过实验发现这是有效的：

    const updatedState = {
      sectionArr: updatedSectionArr,
      taskArr: sections.taskArr,
    };

    setSections(updatedState);

不是这个：

    const updatedState = sections;
    updatedState.sectionArr = updatedSectionArr;

    setSections(updatedState);

但是对这个机制的任何更详细的解释将不胜感激

状态设置器，即 useState 钩子返回，不会重新渲染组件

2 个答案: