hooks中,useState异步问题解决方案

问题描述:

在hooks中,修改状态的是通过useState返回的修改函数实现的.它的功能类似于class组件中的this.setState().而且,这两种方式都是异步的.可是this.setState()是有回调函数的,那useState()呢?

问题点：

1. 它是异步的，而且没有回调
2. 通过async,await 这种方式也无效

需求：

一个同事询问如何根据某个状态值发生改变后再去执行某个方法，而且需要在这个方法里去取得这个值

解决方案：

结合useEffect进行监听:一句话概括,我不需要知道你设置完成没有.只要useEffect监听到你值变化了,再进行操作.

一个函数里是可以写多个useEffect的，不用去考虑会影响到性能啥的，可以只针对要监听的值进行书写即可

demo:

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

const index = () => {
    const [show, setShow] = useState('');

    const fnss = async()=>{
        setShow('2222');
    }
    useEffect(()=>{
        console.log(show)

    },[show])


    return (
        <div>
            <Button onClick={fnss}>点击</Button>
        </div>
    );
}


export default index