React报错之react component changing uncontrolled input - chuckQu
source link: https://www.cnblogs.com/chuckQu/p/16560197.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React报错之react component changing uncontrolled input
正文从这开始~
当input
的值被初始化为undefined
,但后来又变更为一个不同的值时,会产生"A component is changing an uncontrolled input to be controlled"警告。为了解决该问题,将input
的值初始化为空字符串。比如说,value={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 (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message}
/>
</div>
);
};
export default App;
上面代码的问题在于,message
变量被初始化为undefined
,因为我们没有在useState
钩子中为其传递初始值。
解决该错误的一种方式是,如果input
的值为undefined
,那么就提供一个备用值。
import {useState} from 'react';
const App = () => {
const [message, setMessage] = useState();
const handleChange = event => {
setMessage(event.target.value);
};
// 👇️ value={message || ''}
return (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message || ''}
/>
</div>
);
};
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 (
<div>
<input
type="text"
id="message"
name="message"
onChange={handleChange}
value={message}
/>
</div>
);
};
export default App;
在useState
钩子中传递初始值可以避免警告,因为此时message
变量并没有从undefined
变更为一个值。
引起警告的原因是,当message
变量在没有值的情况下被初始化时,它会被设置为undefined
。
传递一个像value={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 (
<div>
<input
ref={inputRef}
type="text"
id="message"
name="message"
defaultValue="Initial value"
/>
<button onClick={handleClick}>Log message</button>
</div>
);
};
export default App;
上述示例使用了不受控制的input
。注意input
表单上并没有设置onChange
或者value
属性。
你可以使用
defaultValue
属性来为不受控制的input
传递初始值。然而,这一步骤不是必要的,如果你不想设置初始值,你可以省略该属性。
当使用不受控制的input
表单时,我们使用ref
来访问input
元素。每当用户点击例子中的按钮时,不受控制的input
的值都会被记录下来。
你不应该为不受控制的input
设置value
属性,因为这将使input
表单不可变,你将无法在其中输入。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK