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

Question

我正在尝试编写一个基本上是传输列表的组件，但为了这个问题我简化了很多。

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

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

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

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

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

import React, { useState } from 'react';

export const TransferList = ({record, source, allItems}) => {

  var unselected = allItems.filter(name => !(record[source].includes(name)));
  const [left, setLeft] = useState(record[source]);
  const [right, setRight] = useState(unselected);

  return (
    <div>
      Selected:
      <ul>
        { left.map(s => <li>{s}</li>) }
      </ul>
      Unselected:
      <ul>
        { right.map(s => <li>{s}</li>) }
      </ul>
    </div>
  );
}

Answer 1

我只是知道您的 allItems 已更新，然后您应该使用 useEffect 来跟踪 allItems 的更新：

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

请检查是否有效