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特有的，希望使用简单类型（如普通对象和数组）。

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

setHidden(hidden.set(name, hidden))

状态应保持不变：

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

这可能会带来一些开销，并无法满足ES6 Map的潜在好处。除非需要严格的项目顺序和非字符串键之类的Map功能，否则出于同一目的最好使用普通对象。

使用挂钩无法在地图（字典）状态更改上更新组件

1 个答案: