Компонент изменяет неконтролируемое автозаполнение для управления

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}
    />
  );
}

вызов autocomplte:

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

как я могу решить эту ошибку?

Answer 1

Вы гарантируете, что свойство value никогда не было неопределенным, но вы должны были сделать то же самое для inputValue .

1. состояние «значение» с комбинация свойств value / onChange. Это состояние представляет значение, выбранное пользователем, например, при нажатии Enter.
2. состояние «входное значение» с комбинацией свойств 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>
  )
}