React中如何替换嵌套数组对应项实现答题选项切换更新

问题场景 #

• 基于React开发支持自定义题量的测验应用，单题设置5个可切换选择的答案选项
• 核心需求：用户切换同一题的答案选项时，需要用新选择的答案替换存储数组中该题对应的旧答案记录，最终基于存储的答案集校验正确性计算得分
• 原有实现问题：逻辑冗余，仅在用户不切换同一题目答案时可正常运行，切换答案时无法正确替换旧记录，还存在数组无限增长的隐患

原有问题代码如下：

function getDataFromQuestionComponent(dataFromComponent){
    getQuizData.push(dataFromComponent)
    // 避免得分数据数组持续增长
    if (getQuizData.length > amount) {
        maintainScoreArrayLength(getQuizData)
    }
}
function maintainScoreArrayLength(quizDataArray){
    // 尝试匹配同题旧答案做替换，逻辑可靠性差
    let lastItemZeroIndexText = (quizDataArray[quizDataArray.length - 1][0].body)

    for (let i=0; i<quizDataArray.length; i++) {
        if (lastItemZeroIndexText === getQuizData[i][0].body) {
            newArray.push(getQuizData.indexOf(getQuizData[i]))                 
        }
    }
    // 移除匹配到的旧条目
    getQuizData.splice(newArray[0], 1)
}

存储的嵌套对象数组结构参考：

原有代码缺陷说明 #

• 依赖题目文本body做匹配标识，一旦存在题干重复、题干内容修改的场景，匹配逻辑会直接失效
• 代码中使用了未定义的全局变量newArray，会持续累积历史索引值，多次切换答案后splice操作会删除错误位置的条目
• 先push新值再裁剪旧值的逻辑冗余，边界场景下（比如已答题数刚好等于设置的总题量时）会出现漏处理
• 直接修改原数组的写法不符合React状态更新的不可变原则，容易引发组件不重渲染的问题

优化实现方案 #

首先确保每道题目携带全局唯一的questionId字段（题目从后端返回时自带，或前端渲染题目时按顺序生成固定唯一ID），每次拿到题目组件回传的答案数据时，直接基于ID做同题旧答案过滤，不需要额外做数组长度裁剪：

// 答案数据用React state管理，不要用全局可变变量
const [quizAnswerData, setQuizAnswerData] = useState([])

function handleQuestionAnswerUpdate(newAnswerData) {
    // 传入的newAnswerData需包含当前题的唯一questionId
    const currentQId = newAnswerData[0].questionId
    setQuizAnswerData(prevData => {
        // 过滤掉当前题已存储的旧答案
        const dataWithoutCurrentQ = prevData.filter(record => record[0].questionId !== currentQId)
        // 拼接新答案返回，数组长度始终和已作答题目数一致，无冗余条目
        return [...dataWithoutCurrentQ, newAnswerData]
    })
}

该方案的优势：

• 逻辑简洁，不需要额外维护数组裁剪逻辑，不管用户切换多少次同一题的选项，数组中永远只保留该题最新选择的答案
• 基于唯一ID匹配，不会因为题干重复、内容调整出现匹配错误
• 符合React状态更新规范，不会出现状态修改后页面不更新的问题
• 时间复杂度更低，不需要每次更新都遍历全数组找索引再做splice操作

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