小编kin*_*nza的帖子

你能告诉我为什么我收到错误“一个组件正在改变一个不受控制的自动完成来控制。元素不应该从不受控制切换到受控制（反之亦然）。决定在整个生命周期内使用受控制或不受控制的自动完成元素组件。”

成分 ：

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

我该如何解决这个错误？

我正在使用 React Hook Forms。

<Controller
  control={control}
  rules={{ required: "Required" }}
  error={errors.state ? true : false}
  helperText={errors.state && errors.state.message}
  name="state"
  as={
    <AutoComplete
      options={stateOptions}
      onChange={selectStateHandler}
      label="State"
      value={selectedState}
    />
  }
/>

辅助文本正在使用TextField但不与Autocomplete. TextField边框颜色因错误而变化，我想要与Autocomplete.