如何输入状态数组并求和对象的道具？

Question

That is the code: I have order array in state, table which map it ,and now i need to summarize prices which are inside objects in array. It should be counted in "handleCount" function,without adding any extra state objects, and return true cost of orders. Then "newPrice"-(which store cost)should be passed to "handleSubmit function.

 const menuItems = [ { id: 1, name: "Pizza", price: 40 }, { id: 2, name: "Burger", price: 30 }, {id:3 , name: "Taco", price:15}, {id:4,name:"Cola",price:5} ]; class App extends React.Component { constructor() { super(); this.state = { order: [] }; } render() { return ( <div> <label> What would u like to order: <select price={this.state.price} name="list" onChange={this.addFood}> {menuItems.map((item) => (<option value={item.id}>{item.name}</option>))} </select> </label> <h1></h1> <h1></h1> <output>{this.state.counter}</output> <h1></h1> <button onClick={this.handleCount}>count</button> <button onClick={this.handleSubmit}>submit</button> <table size="sm" name="table"> <thead> <tr> <th>number</th> <th>name</th> <th>price</th> <th>delete?</th> </tr> </thead> <tbody> {this.state.order.map((item, index) => ( <tr> <th ordersId={item.id}>{index}</th> <th name={item.name}>{item.name}</th> <th price={item.price}>{item.price}</th> <button onClick={this.handleChangeDelete({ index })} name="deleteButton" id={"delete"+index}>-</button> </tr>) )} </tbody> </table> </div> ); } handleCount =(e)=>{ let newPrice = this.state.order.map(price); order.reduce((x, y) => x + y) console.log(newPrice); return (newPrice); } addFood =(e)=>{ //var integer = parseInt(this.state.price, 10); let newItem = menuItems.find((item) => item.id == e.target.value); this.setState({ order: [...this.state.order, newItem] }); console.log('state', this.state.order[0]); } handleChangeDelete =({ index }) => { //console.log(index); return (evt) => { let order = this.state.order; order.splice(index , 1); this.setState({ order: order }); }; }; handleChangeSelect =(e)=> { this.setState({value: event.target.price}); } handleSubmit =(event)=> { if(this.state.counter===0){ alert('You did not order anything'); }else{ alert('Your order is ready, it costs ' ); event.preventDefault(); }} } ReactDOM.render(<App />, document.getElementById("app")); 

Answer 1

 const menuItems = [ { id: 1, name: "Pizza", price: 40 }, { id: 2, name: "Burger", price: 30 }, { id: 3, name: "Taco", price: 15 }, { id: 4, name: "Cola", price: 5 } ]; console.log( sumByKey(menuItems) ); console.log( sumByKey(menuItems, "id") ); console.log( sumByKey(menuItems, "name") ); function sumByKey(arr, key){ key = key || "price"; // (*1) let join = isNaN( arr[0][key] ) ? ", " : 0; // (*2) return arr.reduce(function(prev, elem){ prev[key] = prev[key] + join + elem[key]; return prev; })[key]; // (*3) } 

(*1): It will sum the "price" values by default, if key is undefined.

(*2): Checking the first element's key value. If it's not NaN - later we will place 0 between the sum of elements. And if it's NaN (String) - commas.

(*3): .reduce function will reduce the array up to one last element. And the function will show it's key value.

Answer 2

The simplest solution is:

const menuItems = [
  { id: 1, name: "Pizza",  price: 40 },
  { id: 2, name: "Burger", price: 30 },
  { id: 3, name: "Taco",   price: 15 },
  { id: 4, name: "Cola",   price: 5  }
];

const pricesSum = menuItems => {
  return menuItems.reduce((prev, current) => {
             prev.price = prev.price + current.price;
             return prev;
           }
        ).price;
 }

const sum = pricesSum(menuItems);

More simple:

const pricesSum = menuItems => {
  let sum = 0;
  menuItems.forEach(item => 
    sum += item.price
);

  return sum;
}

const sum = pricesSum(menuItems);

90