当依赖项发生变化,更新total值,打印的问题

来源:3-6 useEffect语法讲解(模拟生命周期以及自定义Hook)

皮小西

2023-06-12

 const [count, setCount] = useState(0)
  const [total, setTotal] = useState(0)

  useEffect(() => {
    console.log(count, 111111) // 打印两次 0
    setCount(count + 1)
  }, [])

  useEffect(() => {
    console.log(total, 22222) // 打印三次 0 
    setTotal(count * 5)
  }, [count])
  
  return (
    <div className='App'>
      <p>欢迎学习React后台课程</p>
      <p>
        Count:{count}, Total:{total}
      </p>
    </div>
  )

老师您好,我想请问一下,就是明明页面中total为5,但是为什么打印出的结果却是三次 0 呢?并且count也已经变成1了,但是还是打印了两次0呢?

写回答

1回答

河畔一角

2023-06-13

1. 需要先把main.js里面的严格模式关闭。关闭以后count就会打印一次,total打印两次。

2. count初始化打印一次为0,total打印一次为0 当count更改后,total会再次执行,但是total放在前面,此时total*count还没有计算完成,因此也打印0

0
0

React18+TS 通用后台管理系统解决方案落地实战

全面提升React高阶技能,灵活驾驭各类后台管理系统开发痛点

624 学习 · 226 问题

查看课程