reactjs - 组件正在更改不受控制的自动完成以进行控制

Question

您能告诉我为什么会出错吗？“某个组件正在将不受控制的自动完成功能更改为受控制。
元素不应从不受控制的状态切换到受控制的状态(反之亦然)。
确定在组件的整个生命周期中使用受控或不受控制的自动完成元素。”
零件 :

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

我该如何解决这个错误？

Answer 1

您确保从未定义值属性，但必须对 inputValue 进行同样的操作。

与value/onChange Prop 组合的“值”状态。此状态表示用户选择的值，例如在按下Enter键时。

与inputValue/onInputChange Prop 组合的“输入值”状态。此状态表示在文本框中显示的值。

⚠️ These two state are isolated, they should be controlled independently.

当未定义 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>
  )
}