javascript - React : Warning, 组件正在更改要控制的不受控制的输入

Question

我正在使用 Google maps address autocomplete在我的 React 应用程序中。它通过 Hook 输入元素、观察变化并提供下拉位置选择来工作。
相关代码:

<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;
    }
});

但是，我在浏览器控制台中收到警告 : 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似乎很明显——自动完成功能正在改变输入本身，而不是使用 react 状态来制作受控组件。然而，这就是我想要的方式。有没有办法可以消除这个错误？我试过添加一个空的 defaultValue和一个空的 onChange功能，但仍然得到错误。提前致谢!
(同样的问题有几个问题，但没有关于故意禁用警告)

Answer 1

使用常规不受控制的 html input而不是受控的 react 引导输入之一。
您可以使用 ref引用输入。

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

有关不受控制的输入和 ref 的更多信息这里的用法:
https://reactjs.org/docs/uncontrolled-components.html