无法访问间隔内的状态

Question

我无法在一段时间内访问状态。在这里，我想在计数器等于 10 时访问间隔内的计数器，我想停止它。

注意：这里我不想在 useEffect 中放置间隔，因为我需要通过处理事件在特定时间启动间隔。

export default props => {

  const [counter, setCounter] = useState(0);

  const startInterval = () => {
    const timeout = setInterval(() => {
      setCounter(counter + 1);
      console.log("counter: ", counter); // alway return 0
      if(counter === 10) clearInterval(timeout);

    }, 1000);
  };

} 

Answer 1

正如我在这里看到的，setCounter(counter+1)由于词法范围的原因，甚至你也不会更新。所以你必须像这样改变它：

setCounter(counter => counter + 1);

另外，由于词法作用域，您不会访问计数器来检查条件，因此您必须创建一个变量并通过向其分配计数器来更新功能组件内部的变量，然后使用 if 条件检查它。

完整代码代码：

let myCounter = 0;
let timeout = null;
export default CounterApp = props => {

  const [counter, setCounter] = useState(0);

  // Also don't forget this
  useEffect(()=> {
    return ()=> clearInterval(timeout);
  }, []);      

  myCounter = counter;
  const startInterval = () => {
    timeout = setInterval(() => {
      setCounter(counter => counter + 1);
      console.log("counter: ", myCounter); // counter always return 0 but myCounter the updated value
      if(myCounter === 10) clearInterval(timeout);

    }, 1000);
  };

}