Question

我正在尝试创建一个自动完成功能，允许用户输入多个值。选项太多，所以我需要在后端进行过滤。因此，对于用户输入的每个新值，后端都会提供新选项。

收到此警告：“Material-UI：提供给自动完成的值无效。所有选项均不匹配...您可以使用 getOptionSelected 道具自定义相等性测试。”

 <Autocomplete
   onChange={(_event, newVal) => setValue(newVal)}
   multiple={multiple}
   loading={loading}
   loadingText="Searching..."
   defaultValue={defaultValue}
   options={options}
   filterOptions={(options, _state) => options}
   getOptionLabel={(option) => option.label}
   getOptionSelected={(option, value) => _.isEqual(option, value)}
   renderInput={(params) => (
     <TextField
     {...params}
     {...textFieldProps}
      onChange={queryChanged}
      inputlabelprops={{ shrink: true }}
      />
    )}
 />

我明白为什么会出现警告，新查询的选项中不存在旧值。但是有没有办法摆脱这个警告？或者我是否错误地接近了这个？谢谢

Answer 1

请在下面查看我的代码，我将 dataFromServer 变量视为来自服务器的真实数据。当响应到达时，您应该更新选项状态。

import { useEffect, useState } from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

const fakeDataFromServer = [
  { key: 0, value: "example 1" },
  { key: 1, value: "example 2" }
];

export default function App() {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // here goes your fetch call
    // when response arrives -
    setOptions(fakeDataFromServer);
  }, []);

  return (
    <Autocomplete
      options={options}
      getOptionLabel={(option) => option.value}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Example" variant="outlined" />
      )}
    />
  );
}

Answer 2

您只需要添加 id + multiple 道具即可使其工作。

就是这样：

<Autocomplete
      multiple
      id="tags-standard"
      options={options}
      getOptionLabel={(option) => option.value}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Example" variant="outlined" />
      )}
    />

这是工作示例：Codesandbox

具有多个道具和动态选项道具的材质 UI 自动完成

2 个答案: