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

Question

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

这是一个例子：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 惯用的，希望使用简单的类型，如普通对象和数组。

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

setHidden(hidden.set(name, hidden))

状态应该保持不变：

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

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

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

Component not updating on Map (dictionary) state change using hooks

javascript

dictionary

reactjs

react-hooks