Material-ui 自动完成警告提供给自动完成的值无效
Material-ui Autocomplete warning The value provided to Autocomplete is invalid
我正在使用 React 和 material-ui.. 我只是意识到当我尝试提交表单时自动完成组件有一个警告,所以我尝试做一些真正的事情基本就像文档中一样:
let Form = props => {
return(
<form noValidate onSubmit={handleSubmit} >
<Autocomplete
id="combo-box-demo"
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
当我尝试提交表单时出现以下错误:
Material-UI:提供给自动完成的值无效。
None 个选项与 {"id":1,"name":"test"}
匹配。
您可以使用 getOptionSelected
属性来自定义相等性测试。
我还意识到,如果我在组件状态下设置选项,则不会有任何警告(当它们设置为常量时)。所以我想知道你们中的一些人是否知道这种行为?提前谢谢你。
我认为你不应该使用 <form>
来包装 AutoComplete
组件。您应该为 AutoComplete
设置值并使用函数来处理点击按钮提交。
试试这个:
let Form = props => {
const [value, setValue] = useState({})
const handleOnSubmit = (value) => {
setValue(value)
...
}
return(
<div>
<Autocomplete
id="combo-box-demo"
value={value}
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
<Button onClick={() => handleOnSubmit(value)}>Submit</Button>
</div>
)
}
基本上,您收到警告的原因是版本 4.x.x:
中 getOptionSelected
的默认实现
getOptionSelected = (option, value) => option === value
在您的情况下,选择一个值会发生以下比较:
// option === value:
{id:1, name:"test"} === {id:1, name:"test"} // false
显然,在某些情况下可以是 true
。在这种特殊情况下,它是 false
因为对象指向不同的实例。
解决方法!你必须覆盖getOptionSelected
实现:
<Autocomplete
getOptionSelected={(option, value) => option.id === value.id}
...otherProps
/>
[更新]
请注意,在版本 5.x.x 中,道具已重命名:
- getOptionSelected={(option, value) => option.id === value.id}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
这有效,
getOptionSelected={(option, value) => option.value === value.value}
https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194
版本 5.0
isOptionEqualToValue={(option, value) => option.value === value.value}
我正在使用 React 和 material-ui.. 我只是意识到当我尝试提交表单时自动完成组件有一个警告,所以我尝试做一些真正的事情基本就像文档中一样:
let Form = props => {
return(
<form noValidate onSubmit={handleSubmit} >
<Autocomplete
id="combo-box-demo"
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
当我尝试提交表单时出现以下错误:
Material-UI:提供给自动完成的值无效。
None 个选项与 {"id":1,"name":"test"}
匹配。
您可以使用 getOptionSelected
属性来自定义相等性测试。
我还意识到,如果我在组件状态下设置选项,则不会有任何警告(当它们设置为常量时)。所以我想知道你们中的一些人是否知道这种行为?提前谢谢你。
我认为你不应该使用 <form>
来包装 AutoComplete
组件。您应该为 AutoComplete
设置值并使用函数来处理点击按钮提交。
试试这个:
let Form = props => {
const [value, setValue] = useState({})
const handleOnSubmit = (value) => {
setValue(value)
...
}
return(
<div>
<Autocomplete
id="combo-box-demo"
value={value}
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
<Button onClick={() => handleOnSubmit(value)}>Submit</Button>
</div>
)
}
基本上,您收到警告的原因是版本 4.x.x:
中getOptionSelected
的默认实现
getOptionSelected = (option, value) => option === value
在您的情况下,选择一个值会发生以下比较:
// option === value:
{id:1, name:"test"} === {id:1, name:"test"} // false
显然,在某些情况下可以是 true
。在这种特殊情况下,它是 false
因为对象指向不同的实例。
解决方法!你必须覆盖getOptionSelected
实现:
<Autocomplete
getOptionSelected={(option, value) => option.id === value.id}
...otherProps
/>
[更新] 请注意,在版本 5.x.x 中,道具已重命名:
- getOptionSelected={(option, value) => option.id === value.id}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
这有效,
getOptionSelected={(option, value) => option.value === value.value}
https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194
版本 5.0
isOptionEqualToValue={(option, value) => option.value === value.value}