组件正在将不受控制的自动完成更改为受控

Posted 2023-02-19

【中文标题】组件正在将不受控制的自动完成更改为受控

【英文标题】：A component is changing an uncontrolled Autocomplete to be controlled

【发布时间】：2020-11-27 10:40:20

【问题描述】：

你能告诉我为什么我会收到错误“一个制。 元素不应从不受控切换到受控（反之亦然）。 决定在组件的生命周期内使用受控或不受控的自动完成元素。"

组件：

function AutoComplete(props) 

  const defaultProps = 
    options: props.options,
    getOptionLabel: option => option.name,
  ;

  const handleChange = (e, value) => 
    props.onChange(value);
  ;

  return (
    <Autocomplete
      ...defaultProps
      renderInput=params => (
        <TextField ...params label=props.label margin="normal" />
      )
      onChange=handleChange
      value=props.value
    />
  );

调用自动完成：

               <Controller
                control=control
                name = 'country'
                as = 
                  <AutoComplete
                    options=countryOptions
                    onChange=selectCountryHandler
                    label="Country"
                    value=selectedCountry  || ''
                  />
                 />

我该如何解决这个错误？

【问题讨论】：

有趣。你能为此提供一个代码框吗？

我认为它与不受控制的混合控制输入相关：react-hook-form.com/faqs#Whyisfirstkeystrokeisnotworking

帮助我的是在<Controller ...上设置defaultValue=null

您设法解决了这个错误吗？如果有怎么办？

【参考方案1】：

您确保 value 属性从未未定义，但您必须对 inputValue 执行相同操作。

带有 value/onChange props 组合的“value”状态。此状态表示用户选择的值，例如按下 Enter 时。 “输入值”状态与 inputValue/onInputChange 道具组合。此状态表示文本框中显示的值。

⚠️这两个状态是孤立的，应该独立控制。

当 inputValue 属性未定义时，组件变得不受控制，反之亦然。

如果在以下示例中，您从 React.useState('') 您将收到相同的错误消息，因为在第一次渲染期间 inputValue 是 undefined。

import React from 'react'
import TextField from '@material-ui/core/TextField'
import Autocomplete from '@material-ui/lab/Autocomplete'

const options = ['Option 1', 'Option 2']

export default function AutocompleteLab() 
  const [value, setValue] = React.useState(options[0])
  const [inputValue, setInputValue] = React.useState('')

  return (
    <div>
      <div>`value: $value !== null ? `'$value'` : 'null'`</div>
      <div>`inputValue: '$inputValue'`</div>
      <br />
      <Autocomplete
        value=value
        onChange=(_, newValue) => 
          setValue(newValue)
        
        inputValue=inputValue
        onInputChange=(_, newInputValue) => 
          setInputValue(newInputValue)
        
        options=options
        style= width: 300 
        renderInput=(params) => <TextField ...params label="Name" variant="outlined" />
      />
    </div>
  )

【讨论】：

我使用带有 value props 的 Autocomplete 组件，它由 state 控制。通过从自动完成中删除 value=this.state.imageId 属性，它现在不会显示任何错误。

@akshay_sushir 你救了我

【参考方案2】：

我通过删除 default value 解决了这个问题。

             <Autocomplete
                multiple
                id="multiple-limit-tags"
                options=(option) => option.label
                getOptionLabel=(option) => option
                // defaultValue=options || []
                renderInput=(params) => <TextField ...params label="My Label" />           
              />

如何解决这个问题并不明显，文档也没有多大帮助。我觉得奇怪的是文档中复制粘贴的示例会导致此错误。我猜这个例子是可行的，因为选择是硬编码的。