react封装 useState 提供回调方法示例

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


const useStateWithPromise = (defaultVal: any) => {
    let [state, setState] = useState({
        value: defaultVal,
        resolve: (value: any) => { }
    });

    useEffect(() => {
        state.resolve(state.value);
    },
        [state]
    );

    return [
        state.value,
        (updater: (value: any) => any) => {
            return new Promise(resolve => {
                setState(prevState => {
                    let nextVal = updater;
                    if (typeof updater === "function") {
                        nextVal = updater(prevState.value);
                    }
                    return {
                        value: nextVal,
                        resolve
                    };
                });
            });
        }
    ];
};





const Home = () => {
    const [count, setCount] = useStateWithPromise(1);
    const test = () => {
        const a = 0;
        setCount((prevState: number) => prevState + 1).then((res: any) => {
            console.log('res', res)
        });
    };
    useEffect(() => {
        console.log('count', count)
    })
    return (
        <div>
            <p>home{count}</p>
            <button onClick={test}>test</button>
        </div>
    )
}

export default Home;