关于 React Hook 不能访问state最新值的解决方法以及计时器组件的实现

weixin_45703889

已于 2022-07-24 17:25:58 修改

阅读量2.3k

点赞数 2

分类专栏： react 文章标签： react.js javascript 前端前端框架

于 2022-07-11 12:07:04 首次发布

本文链接：https://blog.csdn.net/weixin_45703889/article/details/125718516

版权

本文探讨了React Hook在更新state时遇到的问题，即无法立即获取state的最新值，提出了使用useRef、在setState中使用箭头函数以及自定义Hook的解决方案。此外，还介绍了计时器组件的实现，包括代码示例和如何利用useRef跟踪state的变化以保持界面同步。

摘要由CSDN通过智能技术生成

关于 React Hook 不能访问state最新值的解决方法

setState后 state不是立即更新的，react 的设计是在某个时候将多个 setState 合并更新，这就会出现视图更新但打印出来的 state 还没更新的情况
因为上面的原因所以在组件的方法中是不能直接访问 state 去获取它的最新值。而 useEffect 中或在 setState中使用箭头函数可以访问到 state 的最新值，所以主要有三种方法
- 第一种是使用 useRef，他能将state的最新值从 useEffect 中暴露出来
- 第二种是更新 state 时需要依赖 state 的最新值，在 setState 中使用箭头函数，在箭头函数中能获取当前最新值，你可以对这个最新值进行一些操作。
- 第三种是自定义 hook，能够减少代码量。

附上另一篇写得很好的文章

计时器组件的实现

计时器组件的代码

import React from "react";
const Clock = () => {
   
    const minsRef = React.useRef();
    const secsRef = React.useRef();
    const [num_hours, setNumHours] = React.useState</