Reactjs 修改全局状态时，不会重新渲染react easy peasy组件

我是一个新的反应，这可能是一个相当简单的问题来回答。我正在使用easy peasy进行状态管理，我有一个更新全局状态的操作，但是即使在更新全局状态之后，组件也不会重新呈现。 这里是codesandbox链接。在本例中，当单击save按钮时，我将记录更改为“锁定”状态，这将使其可编辑。

---

当您在单击“保存”后再次将存储状态传递给项目时，您需要监听

项目中的道具更改，并再次设置状态以触发重新渲染

因此，第一步是找出我们想要监控哪些值的变化。从代码中可以明显看出，
status
是最佳候选

Item.js

useEffect(() => {
    setState({ ...state, ...props });
}, [props.updatedAt]); // monitor update date change instead of status change

//不是最终的解决方案
//监视道具状态更改，再次设置状态并触发重新启动
useffect（（）=>{
setState（{…state，…props}）；
}，[道具状态]；

然而，如果我们使用
props.status
来触发重播，则需要解决一个问题

e、 g

当您第一次单击项目2上的保存时，
项目状态
从
打开
->
锁定
更改时，
项目
重新提交。没问题

但是，当您将项目2的下拉框从
lock
更改为
open
，并再次单击
save
时，
项目将不会重新提交

由于项目2的更新存储状态仍标记为锁定，以前的状态也是锁定，因此从反应角度看，没有任何变化

您可以选中此选项以模拟问题


为了解决这个问题，我们需要引入额外的属性来监视它的更改，以便重新加载。我使用
updatedAt
在每次更新时生成时间，让我们知道在值和触发器重新渲染方面存在差异

modal.js

useEffect(() => {
    setState({ ...state, ...props });
}, [props.updatedAt]); // monitor update date change instead of status change

项目：[
{id:1212，标题：“观看mojos”，副标题：，状态：“打开”，更新日期：null}，
{id:1213，标题：“喝奇多”，副标题：，状态：“打开”，更新日期：null}，
{id:1214，标题：“吃青蛙”，副标题：，状态：“锁定”，更新日期：null}
]
saveItem:action（（状态、有效负载）=>{
控制台日志（有效载荷）；
state.items=state.items.map（（d）=>{
if（d.id==payload.id）{
d、 status=“lock”；
d、 updatedAt=new Date（）；//在每次更新时指定新日期
}
返回d；
});
})

Item.js

useEffect(() => {
    setState({ ...state, ...props });
}, [props.updatedAt]); // monitor update date change instead of status change

这是
非常感谢您提供的详细答案和示例！你是最棒的！