时间戳

首页 > 解决方案 > 即使在 useEffect 挂钩中，React setState 也不会更新状态？

reactjs - 即使在 useEffect 挂钩中，React setState 也不会更新状态？

问题描述

所以我正在制作一个每秒更新的工资计数器。我在 useEffect 挂钩中设置了一个 setInterval 计时器，以使用 setState 更新我的“currentSalary”，“currentSalary”的值一直在更新，但是当我记录该值时，它始终为 0。我无法解决这个问题. 以前从未有过设置状态的问题。

关于我做错了什么的任何想法？

 function App() {
  //State
  const [date, setDate] = useState();
  const [salaryPerHour] = useState(145);
  const [salaryPerSecond] = useState(salaryPerHour / 60 / 60);
  const initialSalary = 0;
  const [currentSalary, setCurrentSalary] = useState(initialSalary);

  useEffect(() => {
    console.log("Use effect att App.js");
    if (!date) {
      setInterval(function() {
        updateDate();
        setCurrentSalary(prevCurrentSalary => prevCurrentSalary + salaryPerSecond);
        console.log(currentSalary);
      }, 1000);
    }
  });

标签： reactjsstateuse-effect

解决方案

currentSalary是一个本地常量。它永远不会改变，这不是我们setCurrentSalary想要做的。相反，调用的目的setCurrentSalary是告诉 react 重新渲染组件。在下一次渲染中，将创建一个新的局部变量，并将获得新的值。但是之前渲染的日志语句看不到这一点。

所以它正在更新值，您只需将日志语句放在无用的地方。如果您想验证组件是否使用新值重新渲染，请将您的日志语句放在组件的主体中。

const [currentSalary, setCurrentSalary] = useState(initialSalary);
console.log('rendering with', currentSalary);

useEffect(() => {
  // ...

推荐阅读