React/Next.js循环内状态更新异常：仅更新首个quizzes值且Topic无更新

核心问题总结 #

你的代码存在三个关键问题：state更新键名错误、异步更新导致的状态覆盖、逻辑方向与需求不符，最终引发Topic无法更新、Quizzes值回退的异常。

错误点拆解 #

1. state键名不匹配：代码中用EI和YR更新状态，但定义的state键是TOPIC和QUIZZES，直接导致TOPIC数组永远无法被赋值。
2. 异步更新冲突：在forEach循环中多次异步调用setFinalData，由于闭包特性，每次更新都基于初始的finalData值，后续更新会覆盖之前的结果，这就是Quizzes值回退的原因。
3. 逻辑方向错误：你错误地将文档ID添加到集合中，但预期是收集用户选中的Topic值和文档中的Quizzes值，而非文档ID；同时判断条件与需求完全反向。

修正后的代码 #

const [finalData, setFinalData] = useState({
    TOPIC: [],
    QUIZZES: []
})

const setData = async () => {
    const topicSet = new Set(finalData.TOPIC);
    const quizSet = new Set(finalData.QUIZZES);
    const targetTopic = userSelectedData.topic;
    // 如果仅需收集用户选中的Quiz值，保留targetQuiz；如果要收集所有Quiz值，可删除该变量
    const targetQuiz = userSelectedData.quiz;

    // 批量处理所有异步请求，避免多次更新冲突
    await Promise.all(selectedDocsID.map(async (docId) => {
        const response = await fetchDoc("ques", docId);
        const docTopics = response["Topic"];
        const docQuizzes = response["Quizzes"];

        // 处理Topic：文档包含目标Topic时添加到集合
        if (docTopics?.includes(targetTopic)) {
            topicSet.add(targetTopic);
        }

        // 处理Quizzes：收集文档中所有Quiz值（若仅需目标值，可改为判断includes后添加targetQuiz）
        if (docQuizzes) {
            docQuizzes.forEach(quiz => quizSet.add(quiz));
        }
    }));

    // 统一更新状态
    setFinalData({
        TOPIC: Array.from(topicSet),
        QUIZZES: Array.from(quizSet)
    });
}

<Button onClick={() => setData()}>Update Data</Button>

修正说明 #

1. 键名匹配修正：直接使用TOPIC和QUIZZES作为state更新的键名，确保状态正确赋值。
2. 异步逻辑优化：改用Promise.all批量处理所有异步请求，先将符合条件的值收集到Set中（保证唯一性），最后统一更新state，彻底避免异步更新覆盖的问题。
3. 逻辑方向调整：
   • Topic逻辑：当文档的Topic数组包含用户选中的目标值时，将该值添加到集合。
   • Quizzes逻辑：遍历文档中的Quizzes数组，收集所有值（如果需求是仅保留用户选中的Quiz值，可改为判断docQuizzes.includes(targetQuiz)后添加targetQuiz）。
4. 代码健壮性提升：使用?.可选链操作符避免空值报错，用async/await让异步逻辑更清晰。

最终效果 #

修正后执行setData，会得到符合预期的结果：

{
    "TOPIC": ["Biology"],
    "QUIZZES": ["2022 Biology Geek", "General Knowledge"]
}

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