Material-ui Autocomplete 警告 提供给 Autocomplete 的值无效

Question

我正在使用 React 和 material-ui .. 我只是意识到当我尝试提交表单时我收到了 Autocomplete 组件的警告，所以我尝试做一些非常基本的事情，就像在文档中一样：

 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：提供给自动完成的值无效。没有一个选项与 {"id":1,"name":"test"} 匹配。您可以使用 getOptionSelected 自定义相等测试。

我还意识到，如果我在组件的状态下设置选项，则不会发出警告（就在它们被设置为常量时）。所以我想知道你们中的一些人是否对这种行为有任何想法？非常感谢你。

原文由 Julio Lopez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

基本上，您收到警告的原因是 getOptionSelected 在版本 4.xx 中的默认实现：

  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.xx 版本中，道具被重命名：

 -  getOptionSelected={(option, value) => option.id === value.id}
+  isOptionEqualToValue={(option, value) => option.id === value.id}

原文由 wwwebman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

5.0版

isOptionEqualToValue={(option, value) => option.value === value.value}

原文由 Laszlo Kovesdi 发布，翻译遵循 CC BY-SA 4.0 许可协议