如何保留Select中已经检查的值？

Question

我是ReactJS的初学者，但是Selects存在问题。我有一个Select，它用MenuItem呈现了一些名称。

我需要的是Select已经在名称列表中检查了一些名称。例如，名称Van Henry和Ralph Hubbard已包含在列表中。

为了知道应该标记列表中的哪个项目，如果一个数组中的值也位于另一个数组中，则比较两个数组。所以我在列表中标记了这个名字。

我将展示一张图片，我想我可以用这种方式更好地解释：

这是我在CodeSandBox中输入的代码：https://codesandbox.io/s/material-demo-4iksi?file=/index.js

有人可以帮助我吗？预先谢谢你。

Answer 1

您可以使用filter从array上的names创建新的names2。然后使用useEffect设置您的personName状态。

filter()方法将创建一个新数组，其中包含所有通过提供的功能实现的测试的元素。

React.useEffect(() => {
    setPersonName(names.filter((name) => names2.includes(name)));
}, []);

Answer 2

更新在renderValue中传递给<Select />道具的值

<Select
  labelId="demo-mutiple-checkbox-label"
  id="demo-mutiple-checkbox"
  multiple
  value={personName}
  onChange={handleChange}
  input={<Input />}
  renderValue={(selected) => personName.join(", ")}
  MenuProps={MenuProps}
>

Answer 3

正在检查

personName以查看是否应在此处检查值： <Checkbox checked={personName.indexOf(name) > -1} />

personName在此处初始化为空数组：const [personName, setPersonName] = React.useState([]);

const [personName, setPersonName] = React.useState([...names2]);会将names2数组中的所有名称设置为默认选中。

编辑：在对问题进行更多信息编辑后进行编辑