使用对象状态时 useState 是否不调用重新渲染？

Question

我有一个 firebase 项目，其中 firestore database document 看起来像这样。

document-id => 
    item1 => {detail: "value", title: "value", image: "value}
    item2 => {detail: "value", title: "value", image: "value}
    ...

我的 React component 渲染它看起来像这样：

const [data, setData] = useState({});

useEffect(() => {
  firebase.getDocument("path-to-document").then(section => {
    if (section) {
      setPanels(section.data());
    }
  });
}, []);

const handleChange = (id, data) => {
  const payload = data;
  payload[id] = { ...panels[id], ...data };
  setData(payload);
}

return (<div>
  {Object.keys(data).map((key) => <Card
    data={data[key]}
    onChange={handleChange} />)}
</div>);

我已经从中删除了额外的代码，但是 Card 组件简单地设置了各个对象的布局。更改时它会正确调用 handleChange 函数，并且 data State 会正确更新为新值（在 setData 方法调用后调用 console.log(data) 显示了这一点）。但是 component 不会 reRender 具有 data.

的新值

有没有办法强制组件重新渲染？我在网上的其他地方发现，如果使用与当前存在的相同的数据调用 setData，则 React 'bails' 不会重新呈现，即不会进行任何实际更改。

或者反过来，是否有另一种方式来处理这种交互，让Card组件处理数据的持久化？

谢谢。

Answer 1

尝试设置您的 payload 的副本：{...payload}:

const handleChange = (id, data) => {
  const payload = data;
  payload[id] = { ...panels[id], ...data };
  setData({...payload});
}

因为您没有更改状态，所以您的应用不会 React 和重新呈现。

查看 Functional Updates React 文档。

const handleChange = (id, data) => {
  const payload = data;
  payload[id] = { ...panels[id], ...data };
  setData(prevPayload => {
      console.log(prevPayload === payload)            // true
      return payload                                  // No Re-Render

      // console.log(prevPayload === { ... payload }) // false
      // return { ... payload }                       // Re-render
  );
}

在 codesandbox 上探索这个例子。

使用对象状态时 useState 是否不调用重新渲染？

Does useState not call a rerender when working with object states?

render

firebase

reactjs

react-hooks