欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-01 21:47:44
问题在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...

问题

在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

解决

  1. 第一种

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

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

    const getNum = () => {
        const newStr = "现在数字是" + num
        changeStr(newStr)
    }
    
    const setNum = () => {
        changeNum(num + 1)
    }
  1. 第二种
   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()
   }

本文地址:https://blog.csdn.net/aminwangaa/article/details/107379851

相关标签: react