Material-UI自动完成警告提供给自动完成的值无效 [英] Material-ui Autocomplete warning The value provided to Autocomplete is invalid

问题描述

我正在使用Reaction和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：提供给AutoComplete的值无效。 没有选项与{"id":1,"name":"test"}匹配。 您可以使用getOptionSelected属性来自定义相等性测试。

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

推荐答案

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

这篇关于Material-UI自动完成警告提供给自动完成的值无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！