Material-ui 自动完成警告提供给自动完成的值无效

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

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

Answer 1

我认为你不应该使用 <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>
  )
}

Answer 2

基本上，您收到警告的原因是版本 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}

Answer 3

这有效，

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

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

Answer 4

版本 5.0

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

Material-ui 自动完成警告提供给自动完成的值无效

Material-ui Autocomplete warning The value provided to Autocomplete is invalid

reactjs

autocomplete

material-ui