[英]Warning: A component is changing a controlled input of type text to be uncontrolled. (React.js)
I have the following component where I display user's existing details in the inputs as values and user should be able to change those details and click save.我有以下组件,我在输入中将用户的现有详细信息显示为值,用户应该能够更改这些详细信息并单击保存。 But the issue is that it shows the following error in the console:
但问题是它在控制台中显示以下错误:
**index.js:1 Warning: A component is changing a controlled input of type text to be uncontrolled.**
Here is the component code:下面是组件代码:
const Settings = (props) => {
const { createUser, isAuthenticated, history, errors } = props;
const dispatch = useDispatch();
const authUser = useSelector(state => state.auth.user);
const [user, setUser] = useState({
data: {
name: "",
email: "",
password: "",
},
});
const [error, setError] = useState({
nameError: "",
emailError: "",
passwordError: "",
});
useEffect(() => {
setUser({
data: {
email:authUser.email,
}
});
}, [authUser]);
const { name, email, password } = user.data;
const { nameError, emailError, passwordError } = error;
const onUpdateUser = (e) => {
e.preventDefault();
const isValid = formValidator(user.data, setError);
if (isValid) {
dispatch(updateUser(user.data))
}
};
const onChange = (e) => {
const { name, value } = e.target;
const { data } = user;
setUser({
data: {
...data,
[name]: value,
},
});
};
return (
<BForm title="Create an account" handleSubmit={onUpdateUser}>
{errors ? <p className="error-feedback">{errors}</p> : ""}
<BInput
name="name"
type="text"
handleChange={onChange}
value={name}
placeholder="Your Name"
error={nameError}
/>
<BInput
name="email"
type="email"
handleChange={onChange}
value={email}
placeholder="Email"
error={emailError}
required
/>
<BInput
name="password"
type="password"
value={password}
handleChange={onChange}
placeholder="Password"
error={passwordError}
required
/>
<div className="buttons">
<BButton customClass="login-btn" isfullwidth={true} type="submit">
{" "}
Save{" "}
</BButton>
</div>
</BForm>
);
};
export default Settings;
What is wrong and how can be it fixed?出了什么问题,如何解决? I need to let see the existing values and then change whatever they want.
我需要让查看现有值,然后更改他们想要的任何内容。
useState
doesn't allow patching like setState
did (even if it did, your data is nested at the data
key so it still wouldn't work). useState
不允许像setState
那样进行修补(即使这样做,您的数据也嵌套在data
键处,因此它仍然无法工作)。 The problem is at this line:问题出在这一行:
useEffect(() => {
setUser({
data: {
email:authUser.email,
}
});
}, [authUser]);
It needs to look like this:它需要看起来像这样:
useEffect(() => {
setUser(({data}) => ({
data: {
...data,
email:authUser.email
}
}))
}, [authUser]);
Otherwise, it will remove the name
and password
keys and then the inputs will have undefined
values (eg become uncontrolled).否则,它将删除
name
和password
密钥,然后输入将具有undefined
值(例如变得不受控制)。
You problem in useEffect
.你在
useEffect
问题。 Because you only update email so name
and password
will be lost.因为您只更新电子邮件,所以
name
和password
将丢失。 So the initial value of these input will show this warning.所以这些输入的初始值会显示这个警告。 You can update like this:
你可以这样更新:
useEffect(() => {
setUser(preState => ({
data: {
...preState.data,
email:authUser.email,
}
}));
}, [authUser]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.