useEffectへの依存関係としてES6セットを使用して（）。エフェクトの変更に呼び出されていません

eivindml：

私はES6を使用したいSetと、私のリアクトコンポーネントに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たびに、ヘルパー関数を作成せず。

何か案は？

norbitrial：

私はこの問題は、あなたが直接、状態を変更しようとしていることから来ていると仮定します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以前の予想通り。

私はそれが役に立てば幸い！