React，Mui，动态更改自动完成选项答案

【问题标题】：React, Mui, change AutoComplete options dynamicallyReact，Mui，动态更改自动完成选项
【发布时间】：2022-11-30 20:55:22
【问题描述】：

我愿意使用两个自动完成组件。第一个是在人员列表中选择一些人，它是一个多重自动完成第二个是在之前的选择中赋予person/people特殊的权利。

我的想法是使用 useState 获取第一个 autoComplete 的值，并将其用作第二个的选项。然而，这样做我有一个错误。

这是我的代码：

const [chosenList, setChosenList] = useState([])

<Autocomplete
  multiple
  autoHighlight
  options={myListOfPeople}
  onChange={(newValue) => setChosenList(newValue)}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      label="Select people..."
      placeholder="Select another person..."
    />
   )}
/>

<Autocomplete
  multiple
  autoHighlight
  options={chosenList}
  disableCloseOnSelect
  renderOption={(props, option, { selected }) => (
    <li {...props}>
    <Checkbox
      icon={icon}
      checkedIcon={checkedIcon}
      style={{ marginRight: 8 }}
      checked={selected}
    />
     {option}
    </li>
   )}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      label="Select..."
      placeholder="Select another person..."
    />
   )}
/>

这是错误（当我在第一个中给出值后单击第二个自动完成时发生）：

TypeError: options.filter is not a function

任何想法、线索或解决方案都会对我有很大帮助。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

确保选项列表未定义

options={myListOfPeople || []}

【讨论】：

谢谢你的想法。然而，它不起作用。其实我的状态已经用[]发起了。您的代码出现相同的错误。