(ReactJS)“警告:组件正在更改不受控制的输入，这很可能是由于值从未定义的.”引起的。
由另一个控制器控制的UserForm在控制台上抱怨为
“警告:组件正在更改不受控制的输入。这很可能是由于值从未定义的值更改为定义的值，而这种情况不应该发生。决定在组件的生命周期中使用受控的输入元素还是不受控制的输入元素。更多信息：https://reactjs.org/link/controlled-components input span li ul.”**
这是组件代码：
export default({user}) => {
if(!user) {
return <div></div>
} else {
const [name,setName] = useState(user.name|| "")
useEffect(() => {
setName(user.name);
}, [user])
return <form>
<fieldset>
<legend> Edit {user.name }</legend>
<p>
<label htmlFor={"name"}> Name </label>
<input id="name" value={name || ""} onChange={e => setName(e.target.value)} />
</p>
</fieldset>
</form>
}
}我尝试了在其他堆栈溢出答案上建议的所有修复，但仍然给出了警告。
我是不是遗漏了什么？
回答 3
Stack Overflow用户
发布于 2021-10-23 19:32:32
我已经用这个示例更新了您的组件。
const { useEffect, useState } = React;
function Example({ user }) {
const [name, setName] = useState(user.name);
function handleChange(e) {
setName(e.target.value);
}
useEffect(() => console.log(name), [name]);
if(!user) return <div></div>;
return (
<form>
<fieldset>
<legend>Edit name</legend>
<input
id="name"
value={name}
onChange={handleChange}
/>
</fieldset>
</form>
)
};
const user = { name: 'Bob' };
ReactDOM.render(
<Example user={user} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Stack Overflow用户
发布于 2022-06-16 09:59:19
实际上，当您面对这个问题时，它是受控的和不受控制的组件的错误，简单地说是:受控组件:是使用状态来改变它们的值的组件。示例
<input
onChange={(e)=>{whatever!}
value={from your state}
/>虽然在不受控制的组件中，状态没有那么多，但您可以简单地使用defaultValue或ref。示例
<input
defaultValue={from your state or from anywhere}
/>记住：，如果您同时使用defaultValue和value，它会给出错误，因为我们不能同时使用受控组件的值和无控制组件的defaultValue值。
提示:您需要在受控和不受控制的组件之间进行选择，因此使用ref将是解决方案。或将值更改为defaultValue将解决此问题。
注：
defaultValue只适用于初始负载。如果您想初始化输入，那么应该使用defaultValue，但是如果要使用状态来更改值，则需要使用值。要获得更多React输入defaultValue不随状态更新，请阅读此
我在输入中使用了下面的方式来消除该警告，使用如下所示的短路评估来定义value属性：
value={this.state.fields.name || ''} // (undefined || '') = ''另一种方法
原因是，在您定义的状态中：
this.state = { fields: {} }字段作为空白对象，因此在第一个呈现过程中，this.state.fields.name将是undefined，输入字段的值为：
value={undefined}因此，输入字段将变得不受控制。
一旦在输入中输入任何值，状态下的fields将更改为：
this.state = { fields: {name: 'xyz'} }此时，输入字段被转换为一个受控组件；这就是为什么要获得错误：
组件正在更改要控制的文本类型的无控制输入。
可能的解决方案：
1-将状态中的fields定义为：
this.state = { fields: {name: ''} }Stack Overflow用户
发布于 2022-08-15 14:18:45
这个问题主要发生在属性有一个未定义的值时，现在它可以是checked表示<input />字段，也可以是type，甚至可以是value属性。
解决方案：添加默认值的||。
<input checked={state.bestSellerOnly || false} id="best-seller" type="checkbox" value="" className="" />在这里，state.bestSellerOnly可能会在安装时返回未定义的，这可能会导致对反应的警告。
https://stackoverflow.com/questions/69690181
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号