我在React应用程序中使用谷歌地图地址自动完成。它的工作原理是挂接到一个输入元素，观察变化，并提供一个下拉位置选择。
相关代码：
<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
看起来很明显——自动完成功能是改变输入本身，而不是使用反应状态来生成受控组件。然而，这就是我想要的方式。有什么方法可以让我沉默这个错误吗？我尝试添加一个空的defaultValue和一个空onChange函数，但仍然出现错误。提前感谢！
(同样的问题也有一些问题，但没有关于故意禁用警告的问题(
我在几个项目中遇到过这样的警告，这是原因和解决方案之一。
const [value, setValue] = useState("");<input value={value} onChange={inputHandler} />从上面的代码注意到状态初始值是"0"&"；，检查一下你的。您可能正在使用null或空值。
您需要将其更改为空字符串，该警告将消失。
如果有帮助，请告诉我。
我们只需在表单输入中添加默认值即可清除此错误：
<p style={{ fontWeight: 'bold' }}>Devices: </p>{' '}
<Select
isMulti
value={mapValuesToSelect(devices) || []}
// this one rigth here ^^^^^
onChange={(e) => editDevicesMultiSelect(e)}
或简单输入：
<Input
type="text"
value={code || ''}
// ^^^^^
另外，我们还有一个handleSelectClose函数：
<Button onClick={handleUnselect}>
CLOSE
</Button>
const handleUnselect = () => {
dispatch(setCurrentDesk(undefined));
};
使用一个常规的不受控制的htmlinput，而不是一个受控制的react引导输入
您可以使用ref来引用输入。
<InputGroup hasValidation className="mb-3">
<input
defaultValue="Belgium"
type="text"
ref={this.autocomplete} />
</InputGroup>
有关非受控输入和ref使用的更多信息，请点击此处：
https://reactjs.org/docs/uncontrolled-components.html
您可以尝试使用第三方自定义包，如：React Places自动完成。这个包提供了一个使用受控输入的选项，以及其他道具来定制造型和其他方法
const [value, setValue] = useState(null);
<GooglePlacesAutocomplete
selectProps={{
value,
onChange: setValue,
}}
/>
您需要给出一个初始值和一个onChange方法。我可能会用钩子让它更容易管理。然后，当inputText的值更改时，您可以使用useEffect()钩子来调用API。
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>
正如祝福Ladejobi说它是的原因
<input value={myValue} onChange={inputHandler} />和myValue=null
解决方案是定义CCD_ 12的默认值(如myValue＝"(