javascript - AutoComplete gives red warning when value is set to the useState that it modifies - Stack Overflow

admin管理员组

文章数量:1352039

        const [country, set_country] = useState();

        <Autoplete
          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={autoplete_classes}
          renderInput={(params) => (
            <TextField {...params} label={"Country"} margin="none" focused />
          )}
        />

warning message:

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

The AutoComplete modifies the useState, but the value of the useState modifies the AutoComplete.

Is this not correct?

        const [country, set_country] = useState();

        <Autoplete
          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={autoplete_classes}
          renderInput={(params) => (
            <TextField {...params} label={"Country"} margin="none" focused />
          )}
        />

warning message:

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

The AutoComplete modifies the useState, but the value of the useState modifies the AutoComplete.

Is this not correct?

• javascript
• html
• reactjs
• autoplete
• material-ui

Share Improve this question Follow asked Jan 5, 2022 at 3:59 Bear Bile Farming is TortureBear Bile Farming is Torture 5,17388 gold badges4141 silver badges118118 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

It's because your country value is undefined in first render, Just provide initial value for your country state, like this:

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

or

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

When you don't provide value attribute on AutoComplete or when you set value attribute with undefined, MaterialUI considers AutoComplete as uncontrolled ponent, it means that actually MaterialUI considers you haven't provide any state by yourself to update the value of AutoComplete, but if you provide value on AutoComplete, materialUI considers AutoComplete as controlled ponent, it means that materialUI knows that you have defined some state value to controll the value of AutoComplete.

In your example, in the first render your country is undefined, so MaterialUI considers AutoComplete as uncotrolled ponent, and tries to controll the value of AutoComplete by ownself, but in the next renders, your country is not undefined, so material has to change some inner decisions and this cause the warning it throws.

本文标签： javascriptAutoComplete gives red warning when value is set to the useState that it modifiesStack Overflow