후크를 사용하여 지도(사전) 상태 변경 시 구성 요소가 업데이트되지 않음

후크를 사용하여 지도(사전) 상태 변경 시 구성 요소가 업데이트되지 않음

내게는 확인란이 있는 가시성 필터를 기반으로 이름을 표시해야 하는 하위 구성 요소가 있다.나는 각 이름에 대해 체크된 상태를 추적하기 위해 사전을 사용한다.그러나 내가 사전을 업데이트할 때 아이는 업데이트하지 않는다.

예: 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>
  );
};

불변 상태의 사용은 Reaction에 관용적이며, 일반 물체나 배열과 같은 단순한 유형이 사용될 것으로 예상된다.

지도set같은 지도를 반환하는 동안useState불변의 상태만을 지지한다.세터 기능이 동일한 상태로 호출되는 경우 구성 요소는 업데이트되지 않는다.

setHidden(hidden.set(name, hidden))

국가는 불변적으로 유지되어야 한다.

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

이것은 약간의 오버헤드를 도입할 수 있고 ES6의 가능한 편익을 저해할 수 있다.Map. 그렇지 않다면.Map엄격한 항목 순서 및 비 문자열 키와 같은 기능이 요구되며, 동일한 목적으로 일반 객체를 사용하는 것이 바람직하다.

참조URL: https://stackoverflow.com/questions/55306216/component-not-updating-on-map-dictionary-state-change-using-hooks