React函数组件中如何通过Promise实现带延迟的变量状态更新？

你的myPromise在组件每次渲染时就会被创建并执行——组件一加载，那个2秒的定时器就启动了。等你点击按钮的时候，Promise早就已经完成resolve了，所以then里的setText会立刻触发，导致text值马上更新，而控制台日志是在定时器触发时打印的，所以看起来日志延迟但text立刻变。

另外你代码里还有个语法错误：setTimeout的回调函数后面少了闭合的}，会导致代码报错。

方案1：把Promise放到点击事件内部 #

只有点击按钮时才创建Promise并启动定时器：

function App() {
    const [text, setText] = React.useState('Initial state');

    const handleOnClick = () => {
        const myPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('Changed state');
                resolve('Changed state');
            }, 2000); // 补上缺失的闭合括号
        });

        myPromise
            .then(res => setText(res))
            .catch(e => console.log(e));
    };

    return (
        <>
            <p>{text}</p>
            <button onClick={handleOnClick}>Click Me!</button>
        </>
    );
}

方案2：直接用setTimeout（更简洁） #

如果不需要Promise的其他特性，直接在点击事件里调用setTimeout更新状态即可：

function App() {
    const [text, setText] = React.useState('Initial state');

    const handleOnClick = () => {
        setTimeout(() => {
            console.log('Changed state');
            setText('Changed state');
        }, 2000);
    };

    return (
        <>
            <p>{text}</p>
            <button onClick={handleOnClick}>Click Me!</button>
        </>
    );
}

内容的提问来源于stack exchange，提问作者Rafi