Javascript 在集合状态上干净地执行map（），但在状态更改时仍然重新渲染？

我有一组值。我想迭代这些，并为每个值呈现一个组件

我知道我不能使用

forEach（）

，因为我需要返回一些东西，这就是强烈建议使用

map（）

的原因。 但是我有一个

集合

和不一个

数组

我可以使用

Array.from（set）

但是当set状态改变时，它不再重新运行，即使我可以很好地看到状态确实发生了改变

将（）映射到状态中集合值的最干净方法是什么

...

const [selected, setSelected] = useState(new Set([]))

const addToSelected = data => {
    setSelected(state => state.add(data))
    console.log(selected)
  }

render(
    {selected &&
      Array.from(selected).map(data => {
        return (
          <QuestionsItem
          key={data.message}
          data={data}
          negative
          callback={removeSelected}
          />
       )
    })}
)

。。。
const[selected，setSelected]=useState（新集合（[]））
const addToSelected=数据=>{
setSelected（state=>state.add（数据））
console.log（已选择）
}
渲染(
{选定&&
Array.from（选定）.map（数据=>{
返回(
)
})}
)

• JavaScript集是可变的，这意味着您的

  .add

  调用不会更改任何React的基本

  useState

  能够注意到的内容；所选的

  变量即使在添加内容时也保持不变

一种简单的方法是始终使用数组并自己进行重复值检查。这将以最小的麻烦工作：

const[selected，setSelected]=useState（[]）
const addToSelected=数据=>{
if（已选择。indexOf（数据）=-1）{
setSelected（状态=>[…状态，数据]）
}
console.log（已选择）
}
渲染(
选中。映射（数据=>{
返回(
)
})
)

数组。从（集合）

不改变集合。我不明白为什么它会对集合产生任何影响，包括监听集合更改的任何重新渲染器逻辑。使用

Array.from

应该没问题——我猜还有别的事情发生。@Christian你能提供一些代码吗？您使用的是一类功能组件吗？@weltschmerz据我所知，Array.from（）在第一次渲染时取set的值，这意味着它不会真正“侦听”对set的更改，因此在set更改时不会得到更新。@Rostyslav UpdatedSets在JavaScript中是可变的，因此在执行

state.add（data）时是可变的

它返回的是相同的集合，React认为所选的

中没有任何变化，因为它仍然是相同的集合。