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

Question

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

我也意识到，如果我在组件状态中设置选项，则没有警告（仅当它们像常量一样设置时）。所以我想知道你们中的一些人是否对这种行为有任何想法？非常感谢你。

Answer 1

5.0版本

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

Answer 2

基本上，您收到警告的原因是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 版本中，prop 被重命名：

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

Answer 3

此外，当您想要构建一个搜索器时，您编写的值不需要与您可以设置freeSolo为 true 的选项相同，并且警告将会消失

Answer 4

这有效，

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

https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194

Answer 5

跟进elVengadors 的回答：

当您想要构建一个搜索器时，您在框中输入的值（ ）inputValue不一定是提供的选项之一，您可以设置freeSolo为 true 。

这将停止显示警告消息。

如果您正在创建允许异步查询 API 的组件，则可能会出现这种需要。这将导致 的值options根据 API 的响应而更改，但在更改 来查询 API 之前已选择的选项inputValue可能不会包含在这个新选项列表中。

在自动完成组件文档中，freeSolo描述为：

如果为 true，则自动完成功能是独立的，这意味着用户输入不绑定到提供的选项。

奖金

设置freeSolo为true将删除弹出按钮（自动完成组件右侧的下拉箭头）。要保留此按钮，您还应该添加forcePopupIcon={true}.