时间戳

首页 > 解决方案 > React：状态不会立即更新，即使使用 prevState 和 useEffect

reactjs - React：状态不会立即更新，即使使用 prevState 和 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 总是返回 1， 2 和 3 而不是 4、5 和 6。

所以，我使用了 useEffect 钩子，但问题是通过这样做，我不再有权访问我的 saveChange() 函数，该函数在提交时在我的表单中调用（范围问题）。

我什至不知道 useEffect 是否会解决问题。

如果 prevState 不能解决问题并且 useEffect 使我的函数无法访问，我应该对我的 console.log 做什么以返回 4、5、6？

谢谢

标签： reactjsuse-effect

解决方案

尝试

const saveChange = (e) => {
      e.preventDefault()

      const updatedUserNewInfos = {
          ...userNewInfos,
          user_firstname: "4",
          user_password: "5",
          user_lastname: "6",
       };

      setUserNewInfos(updatedUserNewInfos);
      console.log(updatedUserNewInfos);
};

推荐阅读