React报错之react component changing uncontrolled input react.js

正文从这开始~
总览当input的值被初始化为undefined，但后来又变更为一个不同的值时，会产生"A component is changing an uncontrolled input to be controlled"警告。为了解决该问题，将input的值初始化为空字符串。比如说，value=https://www.it610.com/article/{message ||''} 。

文章图片

这里有个例子来展示错误是如何发生的。

import {useState} from 'react'; const App = () => { // ? didn't provide an initial value for message const [message, setMessage] = useState(); const handleChange = event => { setMessage(event.target.value); }; return (); }; export default App;

上面代码的问题在于，message变量被初始化为undefined，因为我们没有在useState钩子中为其传递初始值。
备用值 【React报错之react component changing uncontrolled input】解决该错误的一种方式是，如果input的值为undefined，那么就提供一个备用值。

import {useState} from 'react'; const App = () => { const [message, setMessage] = useState(); const handleChange = event => { setMessage(event.target.value); }; // ?value=https://www.it610.com/article/{message ||''}return (); }; export default App;

我们使用逻辑与(||)操作符，如果操作符左侧的为假值(比如说undefined)，则返回其右侧的值。

如果message变量的值存储为undefined，我们将空字符串作为备用值进行返回。

useState 另一种解决方案是，在useState钩子中为state变量传递初始值。

import {useState} from 'react'; const App = () => { // ? pass an initial value to the useState hook const [message, setMessage] = useState(''); const handleChange = event => { setMessage(event.target.value); }; return (); }; export default App;

在useState钩子中传递初始值可以避免警告，因为此时message变量并没有从undefined变更为一个值。
引起警告的原因是，当message变量在没有值的情况下被初始化时，它会被设置为undefined。
传递一个像value=https://www.it610.com/article/{undefined}这样的属性，就等于根本没有传递value属性。

一旦用户在input中开始输入，value属性就会被传递到input表单，输入就会从不受控变为受控，这是不被允许的。

defaultValue 注意，如果你使用一个不受控制的input表单，你应该使用defaultValue属性而不是value。

import {useRef} from 'react'; const App = () => { const inputRef = useRef(null); function handleClick() { console.log(inputRef.current.value); }return (); }; export default App;