反应：警告，一个组件正在改变一个不受控制的输入来控制

Question

I'm using Google maps address autocomplete in my React app. It works by hooking into an input element, watching for changes, and providing a dropdown location select.

Relevant code:

<InputGroup hasValidation className="mb-3">
    <FormControl id="autocomplete"/>
</InputGroup>

useEffect(() => {
        
    // only specify the fields we need, to minimize billing
    const options = {"fields": ["address_components"]}

    const autocompleteElement = document.getElementById("autocomplete")

    if(autocompleteElement) {

        autocomplete.current = new google.maps.places.Autocomplete(autocompleteElement, options);
            
        const listener = autocomplete.current.addListener("place_changed", placeSelected);
        return function cleanUp() {
            google.maps.event.clearInstanceListeners(listener);
        }
    } else {
        // nothing to do yet
        return;
    }
});

However, I'm getting a warning in the browser console :

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

Seems obvious enough- the autocomplete functionality is changing the input itself as opposed to using react state to make a controlled component. However that's the way I want it. Is there a way I can silence this error? I've tried adding an empty defaultValue and an empty onChange function, but still got the error. Thanks in advance!

(There were a few questions with the same issue, but nothing about deliberately disabling the warning)

Answer 1

Use a regular uncontrolled html input instead of one of the controlled react-bootstrap inputs.
You can use a ref to refer to the input.

<InputGroup hasValidation className="mb-3">
   <input
          defaultValue="Belgium"
          type="text"
          ref={this.autocomplete} />
</InputGroup>

More info on uncontrolled inputs and ref usage here:
https://reactjs.org/docs/uncontrolled-components.html

Answer 2

I have faced such warnings on a couple of projects here is one of the causes and solution.

 const [value, setValue] = useState("");

 <input value={value} onChange={inputHandler} />

From the code above notice that the state initial value is "", check yours. Its possible you are using null or empty value.

You need to change it to empty string and that warning will disappear.

Let me know if its helpful.

Answer 3

You can try using a third party custom package like: React Places autocomplete . This package provides an option to use controlled input, as well as other props to customise styling and other methods

const [value, setValue] = useState(null);
<GooglePlacesAutocomplete
  selectProps={{
    value,
    onChange: setValue,
  }}
/>

Answer 4

You need to give an initial value and an onChange method. I'd probably use a hook to make this easier to manage. You could then use the useEffect() hook to call the API when the value of inputText changes.

const [inputText, setInputText] = useState('');

useEffect(() => {
    if (inputText.length > 0) {
        ... call the api
    }
},[inputText])

<InputGroup hasValidation className="mb-3">
    <FormControl id="autocomplete" value={inputText} onChange={(event) => {setInputText(event.target.value}}/>
</InputGroup>

Answer 5

as Blessing Ladejobi said its beacuse of

<input value={myValue} onChange={inputHandler} /> and myValue=null

solution is define a default value for myValue (like myValue="")

Answer 6

You can try this:

<InputGroup hasValidation className="mb-3">
    <FormControl id="autocomplete" value={"Canada" || ''}/>
</InputGroup>

This will remove the warning.