我使用的材料-UI 5 AutoComplete组件,我有一个警告,我无法处理。
守则:
<Autocomplete
disableClearable
options={options}
value={{ displayName: selectedName || "" }}
getOptionLabel={(option) => option.displayName || ""}
onChange={onSelectChange.bind(null, selectedName)}
isOptionEqualToValue={(option, selected) =>
option.displayName === selected.displayName
}
renderOption={(props, option) => (
<li {...props}>
<Typography>{option.displayName}</Typography>
</li>
)}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder={placeholder}
/>)}
/>警告:
useAutocomplete.js:220 MUI: The value provided to Autocomplete is invalid.
None of the options match with `{"displayName":""}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.每个选项都是一个带有displayName字段的对象(例如:{displayName})
我看到了一些关于这件事的帖子,但没有任何帮助。我使用的是受控组件(值支柱),在第一次呈现时,selectedName是空的,所以在从列表中选择项之前,我将得到错误信息。
发布于 2022-05-03 09:13:27
也许应该在isOptionEqualToValue中进行检查,以检查所选值?类似的情况如下:
isOptionEqualToValue={(option, value) => {
if (value === "" || value === option)
return true;
}}实际上是为了检查displayName。
https://stackoverflow.com/questions/72077789
复制相似问题