react函数组件useState异步，数据不能及时获取到

useState() 属于异步函数，在useState() 第一次存储的时候，值会存储不上
因为react中state的更新是异步的，我们setState后，react不会立刻对值进行改变，而是将其暂时放入pedding队列中。react会合并多个state，然后值render一次，所以不要在循环中使用useState，它有可能只render最后一次set值，但是当传入一个函数时，函数就会被放入一个队列中，然后按照顺序执行。

问题

const Dva = () => {
    const [arr, setArr] = useState([0])

    // 两个回调函数，第一个回调函数完成后，会将返回结果作为参数，传入第二个参数
    const handleClick = () => {
        Promise.resolve().then(() => {
            setArr([...arr, 1]);
        })
            .then(() => {
                setArr([...arr, 2]);
            })
    }
    useEffect(() => {
        console.log(arr)
    }, [arr]);

    return (
        <>
            <div>
                <button onClick={handleClick}>change</button>
            </div>
        </>
    )
}

输出：

解决方法一

• 使用回调方式传参

  const handleClick = () => {
        Promise.resolve().then(() => {
            setArr([...arr, 1]);
        }).then(() => {
            setArr(preStae => [...preStae, 2])
        })
    }

    useEffect(() => {
        console.log(arr)
    }, [arr]);

输出：