首页 > 解决方案 > ReactJS:为什么一个状态的值不同?

问题描述

所以我正在使用非常基本的组件进入 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

我希望两个函数中的“计数”相同。任何人都可以解释这一点吗?

非常感谢。

标签: javascriptreactjsreact-hooks

解决方案


Test只有一个setInterval功能,count即 always 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
);

推荐阅读