ReactJS:为什么一个状态有不同的值?

时间:2019-11-01 08:49:43

标签: javascript reactjs react-hooks

因此,我将使用非常基本的组件进入Reactjs。 我要从不同的函数中注销相同的状态,但是我看到的是不同的值。

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

const Test = props => {
  const [count, setCount] = useState(0);

  useEffect(()=>{
      setInterval(() => {
        console.log("count in interval is:", count);
      }, 1000);
  },[props]);

  function btnClick() {
    const newCount = count + 1;
    setCount(newCount);
    console.log("count changed to: ", newCount);
  }
  return (
    <div>
      count is {count}
      <br></br>
      <button onClick={btnClick}>+</button>
    </div>
  );
};

export default Test;

点击几下后输出,日志为:

Test.js:8 count in interval is: 0
Test.js:15 count changed to:  1
Test.js:15 count changed to:  2
Test.js:15 count changed to:  3
Test.js:15 count changed to:  4
(8 rows) Test.js:8 count in interval is: 0

我希望两个函数中的“计数”相同。 有人可以解释吗?

非常感谢。

2 个答案:

答案 0 :(得分:2)

Test仅具有一个setInterval函数,其中count始终为0。由于它仅在初始渲染期间创建。

从不创建了另一个setInterval,因为效果从不触发(以[props]为依存关系)。

要在每次重新渲染时更改setInterval的计数:

  • 删除依赖项
  • 返回效果内部的清理功能
useEffect(
  () => {
    const t = setInterval(() => {
      console.log("count in interval is:", count);
    }, 1000);

    return () => clearInterval(t); // cleanup on every re-render
  }
  // no dependency: effect runs on every re-render
);

但是上面的代码将显示警告:

  

缺少count依赖项

因此,只需将count作为依赖项添加到仅在count更改时运行效果

useEffect(
  () => {
    const t = setInterval(() => {
      console.log("count in interval is:", count);
    }, 1000);

    return () => clearInterval(t); // cleanup "old" setInterval
  }
  , [count] // ony run effect every time count changes
);

答案 1 :(得分:0)

count的值没有改变,这是预期的行为,尽管不是显而易见的行为。

看,您甚至将count声明为const count,它是不可变的。相反,发生的是在第一个渲染期间count被分配了0的值。 count的值永远不会改变,相反,是每次更改状态时都会调用组件Test,并且函数useState为常数count分配不同的值,每次都是新常数。

因此,在第一次渲染期间,const count的值由setInterval调用的函数内的closure捕获,并且该值永远保持0