当值设置为它修改的 useState 时，AutoComplete 会发出红色警告

Question

        const [country, set_country] = useState();

        <Autocomplete
          autoHighlight={true} //needed
          autoSelect={true}
          id="geo-select-country"
          options={all_country}
          value={country} // culprit that causes red warning
          onChange={(event, selected_country) => {
            set_country(selected_country);
          }}
          classes={autocomplete_classes}
          renderInput={(params) => (
            <TextField {...params} label={"Country"} margin="none" focused />
          )}
        />

警告信息：

index.js:1 MUI: A component is changing the uncontrolled value state of Autocomplete to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.

自动完成修改 useState，但 useState 的值修改 AutoComplete。

这不正确吗？

Answer 1

这是因为你的国家值在第一次渲染时是undefined，只需为你的国家提供初始值，就像这样：

const [country, set_country] = React.useState('');

或

const [country, set_country] = React.useState(null);

当您不在 AutoComplete 上提供 value 属性或当您使用 undefined 设置 value 属性时，MaterialUI 认为 AutoComplete 作为非受控组件，意味着实际上 MaterialUI 认为你没有自己提供任何状态来更新 AutoComplete 的 value，但是如果你提供 value在 AutoComplete 上，materialUI 将 AutoComplete 视为受控组件，这意味着 materialUI 知道您已经定义了一些状态值来控制AutoComplete.

的值

在您的示例中，在第一个渲染中您的 country 是 undefined，因此 MaterialUI 将 AutoComplete 视为不受控制的组件，并尝试控制的值AutoComplete 自己，但在接下来的渲染中，你的国家不是 undefined，所以 material 必须改变一些内部决定，这会导致它抛出警告。

当值设置为它修改的 useState 时，AutoComplete 会发出红色警告

AutoComplete gives red warning when value is set to the useState that it modifies

html

javascript

autocomplete

reactjs

material-ui