React学习项目车辆配置器如何实现车型发动机匹配校验逻辑

问题核心原因 #

1. 你存储的carModel、carEngine都是对象类型，不能直接和字符串对比，需要取对应的name属性做判断
2. 原校验逻辑的写法carEngine === !"2.0 166bhp"是语法错误，逻辑表达式写反了
3. 之前在摘要区域加条件渲染导致回显失效，大概率是你在渲染阶段直接修改了carEngine状态，或者空值判断缺失导致取值异常

正确实现方案 #

1. 优先在选择发动机时做校验（不影响回显的最优方案）

修改addCarEngine函数，选中发动机前先做匹配校验，不符合要求就不更新状态：

const addCarEngine = (e) => {
    const selectedEngine = EngineTypes.find(x => x.name === e.target.value);
    // 匹配校验逻辑
    if (carModel?.name === "wk" && selectedEngine?.name !== "2.0 166bhp") {
        alert("You can't pick this engine!");
        return;
    }
    setCarEngine(selectedEngine);
}

2. 修复现有代码的空值异常

你当前代码的初始状态是空字符串，直接取carModel.name会抛出异常，需要补全可选链判断：

• 修正总价计算的useEffect：

useEffect(() => {
    const total = (carModel?.price || 0) + (carEngine?.price || 0) + (carGearbox?.price || 0);
    setTotalPrice(total);
}, [carModel, carEngine, carGearbox])

• 修正摘要区域的渲染逻辑：

<ul>
    <li>{carModel?.name || "未选择"}</li>
    <li>{carEngine?.name || "未选择"}</li>
    <li>{carGearbox?.gearbox || "未选择"}</li>
    <li>${totalPrice}</li>
</ul>

3. 可选优化：禁用不匹配的发动机选项

如果希望更友好的交互，可以在选中wk车型时直接禁用不支持的发动机，避免用户误选：

{EngineTypes.map(engine =>
    <label className={styles.button}>
        <input 
            onClick={addCarEngine} 
            type="radio" 
            name="Engine" 
            value={engine.name}
            disabled={carModel?.name === "wk" && engine.name !== "2.0 166bhp"}
        />
        <span>{engine.name}</span>
    </label>
)}

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