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

        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`.

AutoComplete 修改了 useState ,但 useState 的值修改了 AutoComplete

这不正确吗?

stack overflow AutoComplete gives red warning when value is set to the useState that it modifies
原文答案
author avatar

接受的答案

这是因为您的国家/地区值在第一次渲染时为 undefined ,只需为您的国家/地区状态提供初始值,如下所示:

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

或者

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

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

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


答案: