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

我有一个

firebase

项目，其中有一个

firestore

数据库

文档

，看起来像这样

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

我的

React组件

呈现如下内容：

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>);

const[data，setData]=useState（{}）；
useffect（（）=>{
firebase.getDocument（“文档路径”）。然后（节=>{
如果（第节）{
setPanels（section.data（））；
}
});
}, []);
常量handleChange=（id，数据）=>{
常量有效载荷=数据；
有效载荷[id]={…面板[id]，…数据}；
setData（有效载荷）；
}
返回(
{Object.keys（data.map（（key）=>）}
);

我已经从中删除了额外的代码，但是

卡

组件简单地设置了各个对象的布局。更改时，它会正确调用

handleChange

函数，并且

数据状态

会正确更新为新值（在

setData

方法调用后调用

console.log（data）

）。但是，

组件

不会

使用数据的新值重新加载

是否有办法强制组件重新启动？我在网上的其他地方发现，

React

如果使用与当前相同的数据调用setData，即不会进行实际更改，则会从重新加载程序中“退出”

或者反过来说，是否有另一种方法来处理此交互，并让

卡

组件处理数据的持久性

---

谢谢。

尝试设置您的有效负载的副本。：

{…有效负载}

：

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

因为你没有改变状态，你的应用程序不会做出反应并重新启动

查看React文档

consthandlechange=（id，data）=>{
常量有效载荷=数据；
有效载荷[id]={…面板[id]，…数据}；
设置数据（有效载荷=>{
console.log（prevPayload==有效负载）//true
返回有效负载//不重新渲染
//console.log（prevPayload==={…payload}）//false
//返回{…有效负载}//重新渲染
);
}

---

在上探索此示例。

这是正确的，但您应该解释为什么会出现这种情况。