状态更改时不重新渲染

Question

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

我的任务是取消选中该复选框上方的消息。我尝试仅使用对象，但是，当对象更改时，组件未重新渲染。

我通过简单地添加另一个useState挂钩（布尔值）作为切换找到了解决方案。自添加以来，该组件将重新渲染，并且将读取我对象的值并对其进行适当处理。]

我的问题是：为什么我必须添加切换开关才能使React重新渲染组件？我不是以允许React查看状态变化的方式更新对象吗？有人可以告诉我这是怎么回事吗？

我创建了一个沙箱来演示此问题：https://codesandbox.io/s/intelligent-bhabha-lk61n

function App() {
  const warehouses = [
    {
      warehouseId: "CHI"
    },
    {
      warehouseId: "DAL"
    },
    {
      warehouseId: "MIA"
    }
  ];

  const [warehouseStatus, setWarehouseStatus] = useState({});
  const [toggle, setToggle] = useState(true);

  useEffect(() => {
    if (warehouses.length > 0) {
      const warehouseStates = warehouses.reduce((acc, item) => {
        acc[item.warehouseId] = true;
        return acc;
      }, {});
      setWarehouseStatus(warehouseStates);
    }
  }, [warehouses.length]);

  const handleChange = obj => {
    const newState = warehouseStatus;
    const { name, value } = obj;
    newState[name] = value;
    setWarehouseStatus(newState);
    setToggle(!toggle);
  };

  return warehouses.map((wh, idx) => {
    return (
      <div key={idx}>
        {!warehouseStatus[wh.warehouseId] && <span>This is whack</span>}
        <MyCheckbox
          initialState
          id={wh.warehouseId}
          onCheckChanged={handleChange}
          label={wh.warehouseId}
        />
      </div>
    );
  });
}
提前感谢。

我有从API调用中提取的仓库清单。然后，我呈现了一个组件列表，这些组件为每个仓库提供了复选框。我将复选框的状态保留在一个对象中（使用...

Answer 1