反应状态在dom中的变化，但在逻辑中没有变化

Question

在这里，我们遇到了一个奇怪的问题。我是Reactjs Newbie，并从事一个简单的计时器项目。 我的代码如下：

import React, { useEffect, useState } from "react";

const TestTimer = () => {

    const [seconds, setSeconds] = useState(10);

    useEffect(() => {
        let timer = setInterval(() => {
            console.log(seconds);
            setSeconds(function(seconds){
                return seconds - 1;
            });
        }, 1000)
    }, []);

    return (
        <div className="timer-component text-light">
            { seconds }
        </div>
    )
}

export default TestTimer; 

问题是，在DOM中，我们可以在几秒钟内看到更改。每一秒钟，它都会下降1。

但是在控制台中，我所看到的只是相同的“ 10”。它仅打印每秒10个。

在哪里做错了？任何帮助都将受到赞赏。

我也搜索了很多问题，但是所有问题都是关于“状态正在改变，但我们对DOM没有变化”。我的反之亦然！

Answer 1

因为您已经在setInterval回调中使用了console.log，实际上此回调可以访问状态的初始值，因此您可以将console.log移至状态更新函数中并获得这样的预期结果：

const TestTimer = () => {

    const [seconds, setSeconds] = React.useState(10);

    React.useEffect(() => {
        let timer = setInterval(() => {
            setSeconds(function(seconds){
                console.log(seconds);
                return seconds - 1;
            });
        }, 1000)
    }, []);

    return (
        <div className="timer-component text-light">
            { seconds }
        </div>
    )
}

ReactDOM.render(<TestTimer/>, document.getElementById("root"))

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

有几个问题：

1. 根据您的问题，您在setInterval回调中调用台（），但在状态设置器函数之外。因此，这仅访问您的默认值，然后在每个返回时重印。

    让timer = setInterval（（）=＆gt; {
         setSeconds（函数（秒）{
           console.log（秒）; ＆lt; -------在州设定器中的控制器
             返回秒-1;
         }）;
     }，1000）
    

2. 您的代码每次调用使用效果时都会按-2更新。这是因为您没有清理使用效率调用。最好习惯使用使用计时器在使用效果中的计时器，否则您会遇到此类问题，这是一个好习惯。阅读有关使用效果

   
   

这是您的示例清理功能和预期的结果

    useEffect(() => {
      let timer = setInterval(() => {
          setSeconds(function(seconds){
            console.log(seconds);
              return seconds - 1;
          });
      }, 1000)
      return () => clearInterval(timer) <----- Cleanup function
    },[]);