javascript - 根据状态更改超时长度

Question

但是，尝试根据状态更改超时的长度时，它会消耗初始状态而不是更改后的状态。下面的代码：

    const [animate, setAnimate] = useState({ start: false, finished: false, position: false });
    const [rollType, setRollType] = useState(0);

    const returnType = (type) => {
        console.log(type)
        if (type === 0) return 9000;
        else if (type === 1) return 19000;
        else if (type === 2) return 9000;
        else if (type === 3) return 14000;
        else if (type === 4) return 18000;
        else if (type === 5) return 9000;
        else return false;
    }

    const animateRoll = useCallback(() => {
        setRollType(Math.floor(Math.random() * 5));

        setTimeout(() => {
            setAnimate({ ...animate, start: true, position: true })

            setTimeout(() => {
                setAnimate({ start: true, finished: true, position: true })

                setTimeout(() => {
                    setAnimate({ ...animate, start: false, position: false })
                }, 3000)
            }, returnType(rollType))
        }, 2000)
    }, [animate, rollType, returnType])

问题是 returnType 函数返回 0 而不是更改的状态，并且在不同的动画类型上不会创建更长的超时时间。

标签： javascriptreactjsreact-hookstimeoutstate