我正在react中创建一个车辆配置程序。用户选择车辆型号、发动机和变速箱。某些型号可能不与某些发动机组合，而最强大的发动机可能只有一种类型的齿轮箱。所有的应用程序逻辑都正常，但我有一些问题。
如果我们先选择发动机而不是车型，我们仍然可以根据每个发动机调整每个车型。
目前，我需要为每个型号添加正确的发动机类型。我想以某种方式简化这个过程，但这是目前我提出的唯一解决方案。
此外，在我看来，所有这些在ui方面都是不正确的。也许有人会想出一个办法，如何隐藏选定车型无法使用的发动机。
我的代码

import React, {useState, useEffect} from "react";
import styles from './style.module.scss';

const ModelsTypes = [
    {
        name: "pro rs3",
        price: 100000,
        engines: ["2.0 166bhp", "5.2l 532bhp", "4.2l 443bhp", "3.6 374bhp"]
    },
    {
        name: "uber rs2",
        price: 50000,
        engines: ["2.0 166bhp", "5.2l 532bhp", "4.2l 443bhp", "3.6 374bhp"]
    },
    {
        name: "standard",
        price: 10000,
        engines: ["2.0 166bhp", "5.2l 532bhp", "4.2l 443bhp", "3.6 374bhp"]
    },
    {
        name: "wk",
        price: 5000,
        engines: ["2.0 166bhp"]
    },
]

const EngineTypes = [
    {
        name: "5.2l 532bhp",
        price: 10000,
        gearbox: ["Automatic"]
    },
    {
        name: "4.2l 443bhp",
        price: 9000,
        gearbox: ["Automatic", "Manual"]
    },
    {
        name: "3.6 374bhp",
        price: 5000,
        gearbox: ["Automatic", "Manual"]
    },
    {
        name: "2.0 166bhp",
        price: 1000,
        gearbox: ["Automatic", "Manual"]
    },
]

const Gearbox = [
    {
        name: "Manual",
        price: 5000,
    },
    {
        name: "Automatic",
        price: 10000,
    },
]

export const CarCustomization = () => {

    const [carModel, setCarModel] = useState("");
    const [carEngine, setCarEngine] = useState("");
    const [carGearbox, setCarGearbox] = useState("");
    const [totalPrice, setTotalPrice] = useState(0);

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

    const addCarModel = (e) => {
        setCarModel(carModel => ModelsTypes.find(x => x.name === e.target.value));
    }

    const addCarEngine = (e) => {
        setCarEngine(carEngine => EngineTypes.find(x => x.name === e.target.value));
    }

    const addCarGearbox = (e) => {
        setCarGearbox(carGearbox => Gearbox.find(x => x.name === e.target.value));
    }

    return (
        <div className={styles.wrapper}>
            <div>
                <h1>Car config</h1>
                <section>
                    <p className={styles.sectionName}>Model</p>
                    <div className={styles.itemWrapper}>
                        {ModelsTypes.map(model =>
                            <label className={styles.button}>
                                <input onClick={addCarModel} type="radio" name="Model" value={model.name}/>
                                <span>{model.name}</span>
                            </label>
                        )}
                    </div>
                </section>
                <section>
                    <p className={styles.sectionName}>Engine</p>
                    <div className={styles.itemWrapper}>
                        {EngineTypes.map(engine =>
                            <label className={styles.button}>
                                <input onClick={addCarEngine} type="radio" name="Engine" value={engine.name} disabled={!carModel?.engines?.includes(engine.name)}/>
                                <span>{engine.name}</span>
                            </label>
                        )}
                    </div>
                </section>
                <section>
                    <p className={styles.sectionName}>Gearbox</p>
                    <div className={styles.itemWrapper}>
                        {Gearbox.map(gearbox =>
                            <label className={styles.button}>
                                <input onClick={addCarGearbox} type="radio" name="Gearbox" value={gearbox.name} disabled={!carEngine?.gearbox?.includes(gearbox.name)}/>
                                <span>{gearbox.name}</span>
                            </label>
                        )}
                    </div>
                </section>
            </div>
            <div className={styles.summary}>
                <div className={styles.summaryinfo}>
                    <ul>
                        <li>Model</li>
                        <li>Engine</li>
                        <li>Gearbox</li>
                        <li>Price</li>
                    </ul>
                    <ul>
                        <li>{carModel.name}</li>
                        <li>{carEngine.name}</li>
                        <li>{carGearbox.name}</li>
                        <li>${totalPrice}</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}