Material-ui 自动完成警告提供给自动完成的值无效。您可以使用 getOptionSelected` 属性来自定义相等性测试

Question

我正在使用自动完成 material-ui。但我收到“提供给自动完成的值无效”警告。 None 个选项与 `` "" . You can use the getOptionSelected` 属性匹配以自定义相等性测试

<Autocomplete
  id="district combo-box-demo"
  value={defaultValueDistrict}
  onChange={(event, value) => {
    if (value && value.districtName) {
      setDefaultValueDistrict(value);
    }
  }}
  options={lisdata}
  getOptionLabel={(option) =>
    option.districtName ? option.districtName : ""
  }
  getOptionSelected={(option, value) =>
    option.districtName === value.districtName
  }
  style={{ width: 190 }}
  renderInput={(params) => (
    <CssTextField
      style={{ background: "white" }}
      {...params}
      variant="outlined"
      placeholder="Nhập quận/huyện"
      name="district"
      onBlur={handleBlur}
    />
  )}
/>

我尝试按照说明进行操作，但仍然失败。大家帮帮我

Answer 1

再见，我做了一个工作示例here。

基本上我通过添加复制了你的代码：

你传给我的导入数据：
```
import { lisdata } from "./lisdata";
```

添加了defaultValueDistrict状态（初始值为空字符串）

const [defaultValueDistrict, setDefaultValueDistrict] = useState("");

模拟数据来自一个apicall：

const [data, setData] = useState([]);

const firstLoad = useRef(true);
useEffect(() => {
 if (firstLoad.current) {  // this is just a technique to run below code just one time
   setTimeout(() => { // simulated called api (data comes after 5 sec)
     setData(lisdata);
   }, 5000);
   firstLoad.current = false;
 }
});

仅此而已。我在控制台中没有错误。

Material-ui 自动完成警告提供给自动完成的值无效。您可以使用 getOptionSelected` 属性来自定义相等性测试

Material-ui Autocomplete warning The value provided to Autocomplete is invalid. You can use the getOptionSelected` prop to customize the equality test

reactjs

autocomplete