MUI 自动完成功能不适用于 react-hook-form

Posted 2023-02-22

【中文标题】MUI 自动完成功能不适用于 react-hook-form

【英文标题】：MUI Autocomplete doesn't work with react-hook-form

【发布时间】：2021-03-20 04:19:02

【问题描述】：

问题摘要

我在不同的时间得到不同的错误。当我选择建议的选项时，我收到以下错误和警告：

Material-UI: The getOptionLabel method of Autocomplete returned undefined instead of a string for 0

Material-UI: The value provided to Autocomplete is invalid. None of the options match with 0

另外，选项没有被选中，输入变为未定义。但是，当再次尝试选择一个值时，它会被选中（但仍会显示错误）。

当我清除输入时出现此错误：

A component is changing the controlled value state of Autocomplete to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component.
The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.

自动完成组件的代码

const AutocompleteUnit = (control, label, name, ...rest) => 

  return (
    <>
      <Controller
        onChange=([,data]) => data
        name=name
        as=
          <Autocomplete
          ...rest
          autoHighlight
          style=marginTop: "25px"
          getOptionLabel=option => option.label
          renderInput=params => (
            <TextField
              ...params
              label=label
              variant="outlined"
            />
          )
        />
        
        control=control
        defaultValue=rest.options[0]
      />
</>

选项

const districtOptions = [
     value: "ciutatvella", label: "Ciutat Vella" ,
     value: "gracia", label: "Gràcia" ,
     value: "eixample", label: "L'Eixample" ,
     value: "sarria", label: "Sarrià" 
  ];

有什么问题吗？

【参考方案1】：

以防万一有人偶然发现：您必须使用自动完成的defaultValue 而不是控制器