由另一个控制器控制的UserForm在控制台上报错
"警告:组件正在将非受控输入更改为受控输入。这很可能是由于值从未定义变为已定义的值，而这是不应该发生的。决定在组件的生命周期内使用受控或非受控输入元素。更多信息:https://reactjs.org/link/controlled-components输入跨度李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>
}
}
我尝试了其他stackoverflow答案上建议的所有修复，但仍然给出警告。
有什么我可能错过了吗?
实际上，当你面对这种情况时，这是一个受控和非受控组件的错误，简单来说:受控组件:是使用状态来改变其值的组件。:
<input
onChange={(e)=>{whatever!}
value={from your state}
/>
在不受控制的组件状态下不涉及太多，您可以简单地使用defaultValue或ref。:
<input
defaultValue={from your state or from anywhere}
/>
记住:如果你同时使用value和defaultValue，它会给你错误，因为我们不能同时使用受控组件的value和非受控组件的defaultValue。
提示:您需要在受控和非受控组件之间进行选择，因此使用ref将是解决方案。或将value更改为defaultValue将解决此问题。
注意:
defaultValue仅适用于初始负载。如果你想初始化输入，那么你应该使用defaultValue，但如果你想使用state来改变值，那么你需要使用value。阅读这篇文章了解更多React input defaultValue doesn't update with state
我在输入中使用了下面的方法来摆脱这个警告，通过使用像这样的短路计算来定义value属性:
value={this.state.fields.name || ''} // (undefined || '') = ''
另一种方法
原因是，在您定义的状态中:
this.state = { fields: {} }
字段作为空白对象，因此在第一次渲染时this.state.fields.name将是undefined，并且输入字段将获得其值为:
value={undefined}
因此，输入字段将变得不受控制。
一旦您在input中输入任何值，fields在状态将更改为:
this.state = { fields: {name: 'xyz'} }
此时输入字段被转换为受控组件;这就是为什么你会得到错误:
组件正在将文本类型的非受控输入更改为控制。
可能的解决方案:
1-定义fieldsin状态为:
this.state = { fields: {name: ''} }
我用这个工作示例更新了你的组件。
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>这个问题主要发生在你对一个属性有一个未定义的值时，现在它可以是<input />字段或type甚至value属性的checked。
解决方案:添加默认值||
<input checked={state.bestSellerOnly || false} id="best-seller" type="checkbox" value="" className="" />
这里state.bestSellerOnly可能在挂载时返回undefined，这可能导致react的警告。
如果您有您的初始值undefined，您可以使用or符号回退到初始空字符串。
const [someValue, setValue] = useState<string | undefined>();
...
<input
value={someValue ?? ''}
onChange={e => setValue(e.target.value)}
/>