如何为对象添加价格

Question

我有一个对象数组。型号、发动机、变速箱。每个设施都有其名称和价格。

const ModelsTypes = [
        {
            name: "pro rs3",
            price: 100000,
        },
        {
            name: "uber rs2",
            price: 50000,
        },
        {
            name: "standard",
            price: 10000,
        },
        {
            name: "wk",
            price: 5000,
        },
    ]

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

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

用户可以选择任何配置。然后所有选定的选项都会显示在摘要中。如何为用户选择的每个属性添加价格。我需要另一个 useState 来总结价格吗？

这是返回数组中所有对象的代码部分。

{ModelsTypes.map(model =>
     <div>
      <label>{model.name}</label>
      <input onClick={addCarModel} type="radio" name="Model" value={model.name} />
     </div>
)}

{EngineTypes.map(engine =>
     <div>
      <label>{engine.name}</label>
      <input onClick={addCarEngine} type="radio" name="Model" value={engine.name} />
     </div>
)}

{Gearbox.map(gearbox =>
     <div>
      <label>{gearbox.gearbox}</label>
      <input onClick={addCarGearbox} type="radio" name="Model" value={gearbox.gearbox} />
     </div>
)}

组件使用的功能

const addCarModel = (e) => {
 setCarModel(carModel => e.target.value);
}

const addCarEngine = (e) => {
 setCarEngine(carEngine => e.target.value);
}

const addCarGearbox = (e) => {
 setCarGearbox(carGearbox => e.target.value);
}

总结

<div className={styles.summaryinfo}>
 <ul>
  <li>Model: <span>{carModel}</span></li>
  <li>Engine: <span>{carEngine}</span></li>
  <li>Gearbox: <span>{carGearbox}</span></li>
  <li>Price: <span>${totalPrice}</span></li>
 </ul>
</div>

Answer 1

如果您将所有实际选择的对象存储在状态中，您可以轻松地在useEffect 中使用price

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.gearbox == e.target.value));
}

活生生的例子：

const ModelsTypes=[{name:"pro rs3",price:1e5},{name:"uber rs2",price:5e4},{name:"standard",price:1e4},{name:"wk",price:5e3}],EngineTypes=[{name:"5.2l 532bhp",price:1e4},{name:"4.2l 443bhp",price:9e3},{name:"3.6 374bhp",price:5e3},{name:"2.0 166bhp",price:1e3}],Gearbox=[{gearbox:"Manual",price:5e3},{gearbox:"Automatic",price:1e4}];
    
    
const App = () => {
    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.gearbox == e.target.value));
    }

    return (
     <div>
        {ModelsTypes.map(model =>
             <div>
              <label>{model.name}</label>
              <input onClick={addCarModel} type="radio" name="Model" value={model.name} />
             </div>
        )}

        {EngineTypes.map(engine =>
             <div>
              <label>{engine.name}</label>
              <input onClick={addCarEngine} type="radio" name="Engine" value={engine.name} />
             </div>
        )}

        {Gearbox.map(gearbox =>
             <div>
              <label>{gearbox.gearbox}</label>
              <input onClick={addCarGearbox} type="radio" name="Gearbox" value={gearbox.gearbox} />
             </div>
        )}

        <div>
         <ul>
          <li>Model: <span>{carModel.name}</span></li>
          <li>Engine: <span>{carEngine.name}</span></li>
          <li>Gearbox: <span>{carGearbox.gearbox}</span></li>
          <li>Price: <span>${totalPrice}</span></li>
         </ul>
        </div>
      </div>
   )
    
}

ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<script>
  var {
    useReducer,
    useEffect,
    useState,
    useRef,
    useCallback
  } = React
</script>
<div id="root"></div>

Answer 2

您可以在选定的零件上使用array.reduce获取总价：

[carModel, carEngine, carGearbox].reduce((total, item)=>total + item.price,0)

或者，您可以使用另一个状态变量并在任何时候在useEffect 中选择一个项目时对其进行总结：

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