재료-ui 자동완료 경고 자동완료에 제공된 값이 잘못되었습니다.

재료-ui 자동완료 경고 자동완료에 제공된 값이 잘못되었습니다.

React와 material-ui와 함께 일하고 있습니다.폼을 전송하려고 할 때 자동 완성 컴포넌트에 경고가 표시된다는 것을 깨달았기 때문에 문서와 같이 기본적인 작업을 수행하려고 했습니다.

let Form = props => {

  return(
        <form noValidate onSubmit={handleSubmit} >
            <Autocomplete
                id="combo-box-demo"
                options={[{id:1,name:"test"},{id:2, name:"test2"}]}
                getOptionLabel={(option) => option.name}
                style={{ width: 300 }}
                renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
            />

폼을 송신하려고 하면, 다음의 에러가 표시됩니다.

UI 자동 완성 UI: 자기완성.{"id":1,"name":"test"}을할 수 있습니다.getOptionSelected동등성 검정을 사용자 정의하는 데 사용됩니다.

또한 컴포넌트 상태에서 옵션을 설정하면 경고 메시지가 표시되지 않습니다(상수처럼 설정된 경우만).이 행동에 대해 아는 사람이 있나요?잘 부탁드립니다.

으로 경고를 으로 되어 있습니다.getOptionSelected4. 4.x.x:

 getOptionSelected = (option, value) => option === value

이 경우 값을 선택하면 다음 비교가 수행됩니다.

// option === value:
{id:1, name:"test"} === {id:1, name:"test"} // false

분, 럴, 그, 그, 그, 다이다.true아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 네.false오브젝트가 다른 인스턴스를 가리키기 때문입니다.

해결책!덮어쓸 필요가 있습니다.getOptionSelected★★★★

<Autocomplete
 getOptionSelected={(option, value) => option.id === value.id}
 ...otherProps
/>

[업데이트] 참고: 버전 5.x.x에서는 소품 이름이 다음과 같이 변경되었습니다.

-  getOptionSelected={(option, value) => option.id === value.id}
+  isOptionEqualToValue={(option, value) => option.id === value.id}

버전 5.0

isOptionEqualToValue={(option, value) => option.value === value.value}

, 는, 「」를 설정할 수 .freeSolo.

이 방법은 효과가 있었습니다.

getOptionSelected={(option, value) => option.value === value.value}

https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194

elVengadors에 대한 후속 조치 답변:

값( 「」의 「」의 「」의 「」)을 참조해 주세요.inputValue는할 수 중 .freeSolo정말이야.

그러면 경고 메시지가 표시되지 않습니다.

API의 비동기 쿼리를 허용하는 컴포넌트를 작성하는 경우 이 작업이 필요할 수 있습니다.이로 인해 다음과 같은 가치가 발생할 수 있습니다.options를 변경하기 에 이미 되어 있는 입니다.inputValueAPI를 쿼리하는 것은 이 새로운 옵션 목록에 포함되지 않을 수 있습니다.

---

자동 완성 컴포넌트 매뉴얼에서freeSolo합니다.

true일 경우 자동 완성은 자유 단독입니다. 즉, 사용자 입력이 제공된 옵션에 구속되지 않습니다.

---

보너스

설정freeSolo로.true팝업 버튼(Autocomplete 컴포넌트 오른쪽에 있는 드롭다운 화살표)이 삭제됩니다.이 버튼을 유지하려면 다음 항목도 추가해야 합니다.forcePopupIcon={true}.

get Option Selected 오류를 추가한 후 동일한 문제가 발생하였습니다.

오류:

<Autocomplete
   fullWidth={true}
   label={'Location'}
   margin={'noraml'}
   multiple={false}
   name={'location'}
   value={formValues.location === '' ? {label: ''} : {label: formValues.location}}
   options={location}
   ref={locationRef}
   onChange={useCallback((e, v) => handleInputChange(e, v))}
/>

솔루션: get Option Selected 속성이 추가되었습니다.

<Autocomplete
   fullWidth={true}
   label={'Location'}
   margin={'noraml'}
   multiple={false}
   name={'location'}
   getOptionSelected={useCallback((option, value) => option.value === value.value)} // added
   value={formValues.location === '' ? {label: ''} : {label: formValues.location}}
   options={location}
   ref={locationRef}
   onChange={useCallback((e, v) => handleInputChange(e, v))}
/> 

사용하지 않는 것이 좋을 것 같습니다.<form>싸다AutoComplete요소.값을 설정해야 합니다.AutoComplete클릭버튼으로 처리하여 제출합니다.
이것을 시험해 보세요.

let Form = props => {
  const [value, setValue] = useState({})
  
  const handleOnSubmit = (value) => {
    setValue(value)
    ...
  }

  return(
        <div>
            <Autocomplete
                id="combo-box-demo"
                value={value}
                options={[{id:1,name:"test"},{id:2, name:"test2"}]}
                getOptionLabel={(option) => option.name}
                style={{ width: 300 }}
                renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
            />
            <Button onClick={() => handleOnSubmit(value)}>Submit</Button>
        </div>
  )
}
            

언급URL : https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid