如何在React中正确更新数组State，避免forEach异步更新失效？

原代码存在的问题 #

• 直接修改原状态数组：React状态是不可变的，直接修改request[idx]属于对原状态的突变，既不会触发正确的重渲染，还会导致状态管理混乱。
• 闭包捕获旧状态：多个异步请求并行执行时，每个回调里的request都是run函数执行时的旧状态，后完成的请求会覆盖先完成的更新，最终只显示最后一个请求的结果。
• 变量命名冲突：forEach的参数名和state变量名都是request，造成代码歧义，增加出错概率。

修复后的代码 #

const initialState = [{question: "a", answer: ""}, {question: "b", answer: ""}]
// 修正变量名为复数，更符合语义
const [requests, setRequests] = useState(initialState);

const run = () => {
    // 把forEach的参数名改为item，避免和state变量冲突
    requests.forEach((item, idx) => {
        fetch("/ask")
            .then(data => data.json())
            .then(response => {
                // 使用函数式更新，确保每次都基于最新的状态修改
                setRequests(prevState => {
                    // 生成新数组，不修改原状态数组
                    return prevState.map((currentItem, currentIdx) => {
                        // 只更新当前请求对应的项，其他项保持不变
                        if (currentIdx === idx) {
                            return {...currentItem, answer: response.answer};
                        }
                        return currentItem;
                    });
                });
            });
    });
}

修复逻辑说明 #

1. 函数式更新：使用setRequests(prevState => ...)的形式，每次更新都会拿到组件当前最新的状态，避免闭包导致的旧状态覆盖问题，多个异步请求的更新会依次基于最新状态生效。
2. 不可变状态更新：通过数组map方法生成新数组，用对象展开运算符{...currentItem}创建新对象，完全不修改原状态，符合React的状态管理规则，能正确触发组件重渲染。
3. 变量名优化：将state变量名改为requests，forEach参数名改为item，消除命名冲突，提升代码可读性。

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