Использование ES6 Установите как зависимость для использованияEffect (). Эффект не вызван изменениями

Question

Я хочу использовать ES6 Set в моем компоненте React с useState() и useEffect(). Он отлично работает с useState(), но useEffect() не срабатывает при изменении зависимости Set.

Вот соответствующий код. onChange() запоминается.

const Filter = ({ onChange }) => {
  const [selected, setSelected] = useState(new Set())

  console.log("Selected Set", selected)

  useEffect(() => {
    console.log("effect")
    onChange(Array.from(selected))
  }, [selected, onChange])

  const handleClick = (topic) => {
    selected.add(topic)
  }

  return (
    <div className="filter">

    </div>
  )
}

Я знаю, что могу сделать это с Array, но было бы неплохо иметь возможность использовать полезные свойства Set без создания вспомогательных функций. каждый раз.

Есть идеи?

Answer 1

Полагаю, проблема в том, что вы пытаетесь напрямую изменить состояние selected. Даже если вы используете Set, вам все равно нужно использовать установщик setSelected, чтобы вызвать изменение, влияющее на useEffect, если у вас есть selected в списке зависимостей.

Я бы попробовал как-то следующее:

useEffect(() => {
  console.log('effect');

  // your actions ...
}, [selected]);

const handleClick = (topic) => {
  const newSelected = new Set(selected);
  newSelected.add(topic);
  setSelected(newSelected);
}

Используя new Set(selected), вы создаете поверхностную копию Set из selected, используя конструктор. Затем вы можете добавить новые предметы к вновь созданному Set. Наконец, вам нужно использовать setSelected для обновления значения selected, которое вызовет useEffect, как вы и ожидали ранее.

Надеюсь, это поможет!