React:状态不会立即更新,即使使用 prevState 和 useEffect
React : state not immediatly updating, even with prevState and useEffect
抱歉新手问题,但我搜索并尝试了我在网上找到的所有内容。
这是我的代码:
const [userNewInfos, setUserNewInfos] = useState({
user_firstname: "1",
user_lastname: "2",
user_password: "3",
});
useEffect(() => {
const saveChange = (e) => {
e.preventDefault()
setUserNewInfos((prev) => {
return {
...prev,
user_firstname: "4",
user_password: "5",
user_lastname: "6",
};
});
console.log(userNewInfos);
};
}, [userNewInfos])
return (
<div className="modal">
<form className="modal__infos" onSubmit={saveChange}>
.......
</form>
</div>
)
我的状态在更改后不会立即更新,显然这是正常行为,因为 useState 是 运行 异步的,所以我正在使用 ... prevState 来解决问题,但它没有改变任何东西,我的 console.log 总是 returns 1、2 和 3 而不是 4、5 和 6。
因此,我使用了 useEffect 挂钩,但问题是这样做后,我无法再访问在提交时在我的表单中调用的 saveChange() 函数(范围问题)。
我什至不知道 useEffect 是否能解决问题。
如果 prevState 不能解决问题并且 useEffect 使我的函数无法访问,我应该如何处理我的 console.log 到 return 4、5、6?
谢谢
尝试
const saveChange = (e) => {
e.preventDefault()
const updatedUserNewInfos = {
...userNewInfos,
user_firstname: "4",
user_password: "5",
user_lastname: "6",
};
setUserNewInfos(updatedUserNewInfos);
console.log(updatedUserNewInfos);
};
抱歉新手问题,但我搜索并尝试了我在网上找到的所有内容。
这是我的代码:
const [userNewInfos, setUserNewInfos] = useState({
user_firstname: "1",
user_lastname: "2",
user_password: "3",
});
useEffect(() => {
const saveChange = (e) => {
e.preventDefault()
setUserNewInfos((prev) => {
return {
...prev,
user_firstname: "4",
user_password: "5",
user_lastname: "6",
};
});
console.log(userNewInfos);
};
}, [userNewInfos])
return (
<div className="modal">
<form className="modal__infos" onSubmit={saveChange}>
.......
</form>
</div>
)
我的状态在更改后不会立即更新,显然这是正常行为,因为 useState 是 运行 异步的,所以我正在使用 ... prevState 来解决问题,但它没有改变任何东西,我的 console.log 总是 returns 1、2 和 3 而不是 4、5 和 6。
因此,我使用了 useEffect 挂钩,但问题是这样做后,我无法再访问在提交时在我的表单中调用的 saveChange() 函数(范围问题)。
我什至不知道 useEffect 是否能解决问题。
如果 prevState 不能解决问题并且 useEffect 使我的函数无法访问,我应该如何处理我的 console.log 到 return 4、5、6?
谢谢
尝试
const saveChange = (e) => {
e.preventDefault()
const updatedUserNewInfos = {
...userNewInfos,
user_firstname: "4",
user_password: "5",
user_lastname: "6",
};
setUserNewInfos(updatedUserNewInfos);
console.log(updatedUserNewInfos);
};