Question

因此，我正在制作一个薪水计数器，该计数器每秒更新一次。我在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);
    }
  });

Answer 1

currentSalary是本地常量。它永远不会改变，这不是setCurrentSalary试图做的。相反，调用setCurrentSalary的目的是告诉响应以重新呈现组件。在下一个渲染中，将创建一个新的局部变量，并将获得新值。但是前一个渲染的log语句看不到。

因此它正在更新值，您只需将log语句放在一个无用的地方即可。如果您想验证组件是否正在使用新值重新呈现，请将您的log语句放在组件主体中。

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

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

Answer 2

代替记录该useEffect挂钩中的值，您可以尝试创建另一个useEffect挂钩，该挂钩在每次对状态currentSalary进行更新时都运行

该钩子看起来像这样：

useEffect(() => {
   console.log(currentSalary)
}, [currentSalary])

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

2 个答案: