React实现比赛胜负预测功能时复选框无法取消勾选的异常问题

两个异常均由状态操作不符合React的设计规范导致：

• 复选框无法取消勾选：删除属性时直接修改了原有状态对象，违反了React状态不可变的原则。setState更新时做浅比较，发现返回的状态对象引用和原状态完全一致，会判定状态无变化，因此不会触发重渲染，视图无法同步更新。
• 跨行选中异常：判断逻辑写在setState updater函数外部，用的是当前渲染周期闭包捕获的旧predictions值，并非最新的状态，多次操作后判断逻辑基于旧值执行，就会出现逻辑错乱。

1. 修正handlePrediction逻辑 #

将判断逻辑移到updater函数内部，操作状态前先做浅拷贝，永远返回新的状态对象：

const handlePrediction = (e) => {
    const id = e.target.id;
    const idx = e.target.getAttribute("idx");
    setPredictions((prev) => {
        // 浅拷贝原状态，不直接修改原对象
        const newPredictions = {...prev};
        if (newPredictions[idx] === id) {
            delete newPredictions[idx];
        } else {
            newPredictions[idx] = id;
        }
        return newPredictions;
    });
};

2. 统一类型避免隐式转换问题 #

原代码中checked判断用了parseInt(predictions[i])，如果predictions[i]不存在时parseInt(undefined)会得到NaN，容易引发判断异常，建议统一转为字符串比对：

// 选手A的checked判断
checked={predictions[i] === match.fighter_a_id.toString()}
// 选手B的checked判断
checked={predictions[i] === match.fighter_b_id.toString()}

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