組件正在將不受控制的自動完成更改為受控制

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

您確保value屬性從未未定義，但您必須對inputValue執行相同的操作。

1. “值” state 與 value/onChange 道具組合。 這個 state 代表用戶選擇的值，例如按下 Enter 時。
2. “輸入值” state 與 inputValue/onInputChange 道具組合。 這個 state 代表文本框中顯示的值。

⚠️ 這兩個 state 是隔離的，應該獨立控制。

當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>
  )
}

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

如何解決這個問題並不明顯，文檔也沒有多大幫助。 我覺得奇怪的是文檔中復制粘貼的示例會導致此錯誤。 我猜這個例子是有效的，因為選擇是硬編碼的。

Answer 3

<自動完成 {...props} value={props.value || 空} />

Answer 4

以前的答案是絕對正確的，但是我花了 20 分鍾才發現 inputValue 它應該是value所以我的工作示例：

export default function AddModal(): ReactElement {
const [resource, setResource] = useState('one');
<Autocomplete
    id="autocomplete"
    options={['one', 'two']}
    defaultValue={resource}
    value={resource}
    PopperComponent={StyledPopper}
    onChange={(event, newInputValue) => setResource(newInputValue)}
    renderInput={(params) => <TextField {...params} />}
/>

Answer 5

我今天遇到了同樣的問題，但我能夠通過提供默認值 null 以及在它不存在的情況下提供 null 值來解決它。 我將留下對我有用的代碼：

<Autocomplete
    value={filters.tag || null}
    defaultValue={null}
    options={tags || []}
    getOptionLabel={(option) => option}
    renderInput={(params) => (
        <TextField {...params} label="Search" variant='outlined' size='small' />
    )}
    fullWidth
    onChange={(event, value) => {
           if (value) {
               setFilters({ ...filters, tag: value });
           } else {
               setFilters({ ...filters, tag: '' });
           }
    }}
/>