解决useState不能接回调的问题

解决useState不能接回调的问题-自定义hooks

这样就不用在修改值之后，再在useEffect 里监听了

/**
  useStateWithPromise: https://github.com/facebook/react/issues/14174
  主要解决useState不能接回调的问题
*/
const useStateWithPromise = (defaultVal) => {
    const [state, setState] = useState({
        value: defaultVal,
        resolve: () => { }
    });

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

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

export default useStateWithPromise;

页面调用的方式

import useStateWithPromise from 'hooks/common/useStateWithPromise';

const [info, setInfo] = useStateWithPromise('123');

await setInfo('456');
// do something

或

setInfo('456').then(()=>{
    // do something
})