react hooks方法获取不到最新的state解决方法

最新推荐文章于 2024-08-01 21:35:06 发布

异世城

最新推荐文章于 2024-08-01 21:35:06 发布

阅读量2.6k

点赞数 2

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

原文链接：https://blog.csdn.net/aminwangaa/article/details/107379851

版权

react 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

hooks

1 篇文章 0 订阅

订阅专栏

本文探讨了在React组件中，如何确保setState后的自定义方法能够获取到最新state。通过使用useEffect监听state变化和利用useRef管理state副本，两种方法解决了setState后回调中state更新延迟的问题。

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

问题

在setState方法执行之后，再执行自定义的方法，这个自定义方法里面获取不到最新的state状态

import React, {useState} from "react";
import { Button } from "antd"

const Demo = () => {
    const [num, changeNum] = useState(1)
    const [str, changeStr] = useState("现在数字是1")

    const getNum = () => {
        const newStr = "现在数字是" + num
        console.log(newStr)
        changeStr(newStr)
    }

    const setNum = () => {
    	// 使用 async await  自执行函数  setTimeout 都没用
        changeNum(num + 1)
        // 执行之后  getNum里拿不到最新的state
        getNum()
    }

    return (
        <div>
            <Button onClick={setNum}>点我+1</Button>
            <div>{num}</div>
            <div>{str}</div>
        </div>
    )
}

export default Demo

解决

第一种

通过useEffect方法监听num 再去触发getNum函数

import React, {useState, useEffect} from "react";
import { Button } from "antd"

const Demo = () => {
    const [num, changeNum] = useState(1)
    const [str, changeStr] = useState("现在数字是1")

    useEffect(() => {
        getNum()
    }, [num])

    const getNum = () => {
        const newStr = "现在数字是" + num
        changeStr(newStr)
    }

    const setNum = () => {
        changeNum(num + 1)
    }

    return (
      <div>
          <Button onClick={setNum}>点我+1</Button>
          <div>{num}</div>
          <div>{str}</div>
      </div>
    )
}

export default Demo

第二种

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

const Demo = () => {
    const numRef = useRef(1)
    const [num, changeNum] = useState(numRef.current)
    const [str, changeStr] = useState("现在数字是1")

    const getNum = () => {
        const newStr = "现在数字是" + numRef.current
        changeStr(newStr)
    }

    const setNum = () => {
        numRef.current = num + 1
        changeNum(numRef.current)
        getNum()
    }

    return (
      <div>
          <Button onClick={setNum}>点我+1</Button>
          <div>{num}</div>
          <div>{str}</div>
      </div>
    )
}

export default Demo