组件未使用钩子在地图（字典）状态更改时更新

Question

我有一个子组件，它应该根据带有复选框的可见性过滤器显示名称。我使用字典来跟踪每个名称的选中状态。但是，当我更新字典时，孩子不会更新。

这是一个例子：https : //codesandbox.io/s/8k39xmxl52

这些是组件：

const App = () => {
  const [names, setNames] = useState(seedNames);
  const [hidden, setHidden] = useState(new Map());

  const handleHidden = e => {
    const name = e.target.name;
    const hidden = e.target.checked;

    setHidden(hidden.set(name, hidden));
  };

  return (
    <div className="App">
      <VisibilityFilter
        names={names}
        hidden={hidden}
        handleHidden={handleHidden}
      />
      <DisplayNames names={names} hidden={hidden} />
    </div>
  );
};

const VisibilityFilter = ({ names, hidden, handleHidden }) => {
  return (
    <div>
      {names.map(name => (
        <div key={name}>
          <input
            type="checkbox"
            name={name}
            checked={hidden.get(name)}
            onChange={handleHidden}
            defaultChecked
          />
          <span>{name}</span>
        </div>
      ))}
    </div>
  );
};


const DisplayNames = ({ names, hidden }) => {
  const visibleNames = names.filter(name => !hidden.get(name));

  return (
    <div>
      {visibleNames.map(name => (
        <div key={name}>{name}</div>
      ))}
    </div>
  );
};

Answer 1

不可变状态的使用是 React 惯用的，期望使用简单类型，如普通对象和数组。

Mapset返回相同的映射，而useState仅支持不可变状态。如果以相同状态调用 setter 函数，则不会更新组件：

setHidden(hidden.set(name, hidden))

状态应该保持不变：

setHidden(new Map(hidden.set(name, hidden)))

这可能会引入一些开销并无视 ES6 可能带来的好处Map。除非需要Map严格的项目顺序和非字符串键等功能，否则最好将普通对象用于相同目的。