구성 요소가 제어되지 않는 자동 완성을 제어하도록 변경하고 있습니다.

구성 요소가 제어되지 않는 자동 완성을 제어하도록 변경하고 있습니다.

"A component is changed a complete uncontrolled Autocomplete to controlled" (컴포넌트가 제어되지 않은 자동완료를 제어하도록 변경 중) 오류가 발생하는 이유를 알려 주시겠습니까?요소는 제어되지 않은 상태에서 제어되지 않은 상태로 전환되지 않아야 합니다(또는 그 반대도 마찬가지입니다.컴포넌트 수명 동안 제어된 요소와 제어되지 않은 요소 중 하나를 사용할지 결정합니다."

컴포넌트:

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

어떻게 하면 이 오류를 해결할 수 있을까요?

값 속성이 정의되지 않았음을 확인했지만 inputValue에 대해서도 동일한 작업을 수행해야 했습니다.

1. value/onChange 소품 조합을 사용하여 "value" 상태를 표시합니다.이 상태는 예를 들어 Enter 키를 누를 때 사용자가 선택한 값을 나타냅니다.
2. inputValue/onInputChange 소품 조합으로 "input value" 상태.이 상태는 텍스트 상자에 표시되는 값을 나타냅니다.

⚠132 이 두 상태는 격리되어 있으므로 독립적으로 제어해야 한다.

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

값을 선택하지 않은 경우 다음을 추가해야 합니다.|| null자동 완성이 제어되지 않는 모드로 전환되는 것을 방지하려면:

<Autocomplete {...props} value={props.value || null} />

합격하면value={undefined}Autocomplete 컴포넌트는 "제어되지 않음" 모드로 시작됩니다. 즉, 자체 내부 상태를 유지합니다.나중에 a를 제공하면value"A component is changing" 오류가 발생합니다.하지만 당신이 합격한다면value={null}대신value={undefined}자동 완성이 제어 모드로 시작됩니다.Autocomplete(자동완료)는 사용자가 자신의 상태를 유지하는 것이 아니라 상태를 제공한다고 가정하고 오류가 사라집니다.

이 문제를 해결하려면default value.

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

이 문제를 해결하는 방법은 명확하지 않고 문서도 별로 도움이 되지 않습니다.이 문서의 복사 붙여넣기 예제가 이 오류를 발생시키는 것은 이상합니다.선택지가 하드코드로 되어있기 때문에 그 예가 효과가 있다고 생각합니다.

이전 답변은 전적으로 옳았습니다만, inputValue가 가치여야 한다는 것을 깨닫기 위해 20분 정도 시간을 할애하여 작업 예를 제시하겠습니다.

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

오늘도 같은 문제가 있었습니다만, 디폴트값의 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: '' });
           }
    }}
/>

언급URL : https://stackoverflow.com/questions/63295924/a-component-is-changing-an-uncontrolled-autocomplete-to-be-controlled