由另一個控制器控制的用戶表單在控制臺上抱怨為“警告：組件正在更改要控制的不受控制的輸入。這可能是由于值從未定義更改為已定義值引起的，這不應該發生。決定使用組件生命周期內受控或不受控制的輸入元素。更多資訊：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>
}
}
我嘗試了其他 stackoverflow 答案中建議的所有修復，但仍然發出警告。有什么我可能缺少的東西嗎？快樂編碼...
uj5u.com熱心網友回復：
我已經用這個作業示例更新了你的組件。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334460.html
標籤：javascript 反应 警告 用户表单 反应组件