Javascript 状态更改时，React不会重新渲染

我有一个从API调用中提取的仓库列表。然后，我呈现一个组件列表，这些组件呈现每个仓库的复选框。我将复选框的状态保存在对象中（使用useState钩子）。当我选中/取消选中复选框时，我会相应地更新对象

我的任务是在复选框未选中时在其上方显示消息。我尝试简单地使用对象，但是，当对象发生更改时，组件没有重新渲染

我通过简单地添加另一个用作切换的useState钩子（布尔值）找到了问题的解决方案。添加后，组件将重新渲染，并读取对象的值并对其执行适当的操作

我的问题是：为什么我必须添加切换以获得React来重新渲染组件？我是否没有以允许React看到状态变化的方式更新对象？有人能给我解释一下这里发生了什么事吗

我创建了一个沙箱来演示这个问题：

函数应用程序（）{
常数仓库=[
{
仓库管理员：“池”
},
{
仓库管理员：“达尔”
},
{
仓库ID：“MIA”
}
];
const[warehouseStatus，setWarehouseStatus]=useState（{}）；
const[toggle，setToggle]=useState（true）；
useffect（（）=>{
如果（仓库长度>0）{
const warehouseStates=仓库。减少（（会计科目，项目）=>{
acc[项目仓库ID]=真；
返回acc；
}, {});
设置仓库状态（仓库状态）；
}
}，[仓库.长度]；
常量handleChange=obj=>{
const newState=仓库状态；
常量{name，value}=obj；
newState[名称]=值；
设置仓库状态（newState）；
setToggle（！toggle）；
};
返回仓库.map（（wh，idx）=>{
返回(
{！warehouseStatus[wh.warehouseId]&&这是whack}
);
});
}

提前感谢。

您正在变异状态（）

这：

应该是：

  const handleChange = ({name,value}) => {
    setWarehouseStatus({...warehouseStatus,[name]:value});
  };

看到问题了吗

    const newState = warehouseStatus; <- this isn't "newState", it's a reference to the existing state
    const { name, value } = obj;
    newState[name] = value; <- and now you've gone and mutated the existing state

---

const newState=仓库状态；非常感谢！现在这是有道理的。
  const handleChange = ({name,value}) => {
    setWarehouseStatus({...warehouseStatus,[name]:value});
  };

    const newState = warehouseStatus; <- this isn't "newState", it's a reference to the existing state
    const { name, value } = obj;
    newState[name] = value; <- and now you've gone and mutated the existing state