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

Question

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

参见下面的示例：react-admin 组件获得 2 个输入：所选项目的子列表 record[source]（source 指向 [=13= 上的属性 ] 对象，这是 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 已更新，那么你应该使用 Effect 来跟踪 allItems 的更新：

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

请检查是否有效

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

Storing derived variables in react state doesn't work

javascript

reactjs

react-admin