Reactjs 物料ui自动完成警告提供给自动完成的值无效

我正在使用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" />}
            />

<Autocomplete
 getOptionSelected={(option, value) => option.id === value.id}
 ...otherProps
/>

let Form=props=>{
返回(
option.name}
样式={{宽度：300}
renderInput={（参数）=>}
/>

当我尝试提交表单时，会出现以下错误：

物料界面：提供给自动完成的值无效。 没有一个选项与

{“id”：1，“name”：“test”}

匹配。 您可以使用

getOptionSelected

prop自定义相等性测试

---

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

我认为你们不应该使用

来包装

自动完成组件。你们应该为
自动完成设置值，并使用一个函数来处理点击按钮提交。

试试这个：


let Form=props=>{
const[value，setValue]=useState（{}）
const handleOnSubmit=（值）=>{
设置值（值）
...
}
返回(
option.name}
样式={{宽度：300}
renderInput={（参数）=>}
/>
handleOnSubmit（值）}>Submit
)
}
基本上，您得到警告的原因是
getOptionSelected
的默认实现：

getOptionSelected=（选项，值）=>option==value

在您的情况下，选择一个值将进行以下比较：

// option === value:
{id:1,name:"test"} === {id:1,name:"test"} // false

显然，在某些情况下，它可能是
true
。在这种特殊情况下，它是
false
，因为对象指向不同的实例

解决方案！您必须覆盖
getOptionSelected
实现：

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" />}
            />

<Autocomplete
 getOptionSelected={(option, value) => option.id === value.id}
 ...otherProps
/>

option.id==value.id}
…其他道具
/>
这起作用了

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

谢谢你的回答，Michael。你介意告诉我原因吗？。因为自动完成属于一个表单，有许多其他字段，我需要在那里。@JulioLopez根据我的经验，我通常使用这种模式来处理表单。我觉得我对我的组件有更多的控制权。我可以控制要创建的数据字段e在不依赖表单的情况下提交。在提交组件之前，如果要在组件的其他部分中使用其中一个数据字段，会发生什么情况？如果您有许多其他字段，则应像我使用
自动完成组件那样为这些字段设置值。您可以使用
useReducer
来存储和操作如果表单中有3个以上的字段，请输入数据字段。