React多次延迟更新state不生效、组件未重新渲染的问题咨询

• 闭包捕获旧值问题：createMessages是异步函数，首次触发时会捕获当前作用域下的messages初始值（空数组）。后续每次循环调用setMessages([...messages, "test"])时，用到的messages始终是最初捕获的空数组，相当于每次都把状态设置为['test']，不会出现累加效果。
• 状态更新规则问题：直接依赖当前状态值生成新状态的写法，在异步、批量更新场景下很容易拿到过期的状态快照，导致更新不符合预期。

把setMessages的传参从直接构造新数组改为函数式更新，函数式更新可以拿到上一次最新的状态值，不受闭包旧值影响：

// 把原来的setMessages([...messages, "test"])替换为下面的写法
setMessages(prev => [...prev, "test"])

修改后的完整代码如下：

import React, { useState } from 'react';
import './App.css';

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
};

function App() {
    const [messages, setMessages] = useState([]);

    const createMessages = async () => {
        for (let i = 0; i < 10; ++i) {
            console.log("test");
            // 改为函数式更新获取最新的前序状态
            setMessages(prev => [...prev, "test"]);
            await sleep(1000);
        }
    };

    return (
        <div id="App">
            <button onClick={createMessages}>Create Messages</button>
            <div>
                {messages.map((message, index) => <p key={index}>{message}</p>)}
            </div>
        </div>
    );
}

export default App;

效果演示：

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