在反应状态下存储派生变量不起作用

如何解决在反应状态下存储派生变量不起作用

我正在尝试编写一个基本上是传输列表的组件，但为了解决这个问题，我对其进行了大量简化。

见下面的例子：react-admin 组件得到 2 个输入：选定项的子列表 record[source]（source 指向 record 对象上的一个属性，这是 { {1}} 特定），以及包含所有可能项目 react-admin 的列表。 我希望组件显示 2 个列表：选定项目列表和未选定项目列表。给出了所选项目的列表，我通过简单地过滤包含所有项目的列表并删除所选项目来计算未选择项目的列表。

但是由于某种原因（绝对与我有限的 javascript/react 经验有关），我无法让它工作。

我在下面的代码中看到的是 allItems 变量工作得很好，并显示了选定的项目。然而，left 变量似乎总是为空，尽管我在执行 right 调用时检查了 unselected 变量是否包含想要的列表。

注意：项目只是字符串，我可以看到变量 useState(unselected) 包含我想要的项目就好了。所以问题与使用状态有关，而不是计算未选中的列表。

我很确定我只是在这里遇到了我的 React/Redux 状态知识的限制，但我不确定为什么会发生这种情况以及如何解决它。非常欢迎任何输入！

unselected

解决方法

我只是以某种方式更新了您的 allItems，然后您应该 useEffect 来跟踪来自 allItems 的更新：

useEffect(()=>{
  const unselected = allItems.filter(name => !(record[source].includes(name)));
  setRight(unselected)
},[allItems])

请检查它是否有效