zoukankan      html  css  js  c++  java
  • react hooks方法获取不到最新的state解决方法

    问题
    在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函数

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

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

    const setNum = () => {
    changeNum(num + 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()
    }

    完整第一种代码

    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

  • 相关阅读:
    SQL Server 查看存储过程执行次数的方法
    css背景图片拉伸 以及100% 满屏显示
    时间倒计时
    对于解决 缓存问题
    HTML5 隐藏地址栏 兼容IOS 与安卓
    多行文字实现垂直居中 css3
    div中溢出文字用点代替
    左侧固定 右侧自适应 布局
    两个DIV第一个用了定位后 如何让两个DIV 落在一起
    String.Format,DateTime日期时间格式化
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/14986938.html
Copyright © 2011-2022 走看看