React函数式组件setState异步问题，求助

兄弟们求助一个问题

先看一下我写的代码

import React, {useState} from 'react';

export default function MyComponent() {
    const [status, setStatus] = useState(0);

    // 点击按钮时切换status的值
    const click = (val) => {
        setStatus(val);
        getStatus()
    };

    // 打印最新的status值
    const getStatus = () => {
        console.log(status);
    };



    return (
        <div style={
   
   { marginLeft: '20px' }}>
            <h2>{status}</h2>
            <button onClick={() => click(1)}>按钮1</button>
            <button onClick={() => click(2)}>按钮2</button>
            <button onClick={() => click(3)}>按钮3</button>
        </div>
    );
}

遇到一个问题在 getStatus 函数中打印 status的值，他打印的永远是旧值

例如：现在status的值是0，我点击《按钮1》，status的值显示为1，没问题，但是我在点击按钮后又调用了getStatus 函数，函数里打印status的值，结果打印的是0

我知道问题的原因是因为，setStatus是异步操作的，但是不知道怎么解决

我试过在click中使用setTimeout 但是没有效果

 const click = (val) => {
        setStatus(val);
        setTimeout(getStatus, 0);
    };

也使用过status改变时回调

useEffect(() => {
    getStatus();
}, [status]);

这样就会导致我第二次点击按钮1，不会触发getStatus函数

当然我肯定知道getStatus函数接收参数不就完事了，在click中将那个val值传递给getStatus，然后在打印不就行啦，既然这样，那我为啥还要再写一个函数，我直接在clikc中打印不就行啦

我只是在阐述这个问题！！！

希望有大佬可以提供帮助，救救我这个小菜鸡

React函数式组件setState异步问题，求助

猜你喜欢