JSONデータの計算と削除

Question

私はデータJSONをどのように計算するのか非常に混乱しています。"id"： "001"、 "item"： "samsung"、 "quantity"：2、 "price"：$ 300のデータがあります。最初に小計=数量*価格を計算したいと思います。それはうまくいく。しかし、私は合計を計算する方法がありません。誰も助けることができますか？ この

export function DataBarang() { 
     return [{ 
       "id" : "001", 
       "item" : "samsung", 
       "quantity" : 1, 
       "price" : 300, 

      }, 
      { 
       "id" : "002", 
       "item" : "iphone", 
       "quantity" : 2, 
       "price" : 450, 

      }]; 
    } 

とこれよりもデータのJSONを保持JSが

import React, { Component } from 'react'; 
import { DataBarang } from './Barang'; 

class cart extends Component{ 
constructor(props) { 
    super(props) 
    this.state = { 
     json: [] 
    } 
} 

componentDidMount() { 
    this.setState((prevState) => { 
     return { 
      json: DataBarang() 
     } 
    }) 
} 
render(){ 
    return (

     <table id="cart" className="table table-hover table-condensed"> 
         <thead> 
          <tr> 
           <th styles="width:50%" className="text-center">Item</th> 
           <th styles="width:10%" className="text-center">Price</th> 
           <th styles="width:8%" className="text-center">Quantity</th> 
           <th styles="width:22%" className="text-center">Subtotal</th> 
           <th styles="width:10%" className="text-center">Action</th> 
          </tr> 
         </thead> 
         <tbody> 
         {this.state.json.map((data, i) => { 
          var subtotal = data.price*data.quantity; 
          var total = total+subtotal; 
         return (
          <tr key={i}> 
           <td data-th="Product"> 
            <div className="row"> 
             <img src={} alt="..." className="img-responsive"/> 
             <div className="col-sm-10"> 
              <h4 className="nomargin">{data.item}</h4> 

             </div> 
            </div> 
           </td> 
           <td data-th="Price">Rp.{data.price}</td> 
           <td data-th="Quantity"> 
            <input type="number" className="form-control" value={data.quantity}/> 
           </td> 
           <td data-th="Subtotal" className="text-center">Rp.{subtotal}</td> 
           <td className="actions" data-th=""> 
            <button className="button is-danger"><i className="fa fa-trash-o"></i></button>        
           </td> 
          </tr>); 
         })} 
         </tbody> 
         <tfoot> 


          <tr> 
           <td><Link to ="/" className="button is-warning"><i className="fa fa-angle-left"></i> Lanjut Berbelanja</Link></td> 
           <td colspan="2" className="hidden-xs"></td> 
           <td className="hidden-xs text-center"><strong>Total Rp. {}</strong></td> 
           <td><a href="#" className="button is-success">Checkout <i className="fa fa-angle-right"></i></a></td> 
          </tr>) 

         </tfoot> 
        </table> 

    ); 

} 
} 

export default cart; 

データを表示するテーブルであり、ボタンを使用してデータを削除する方法を教えている（）のonClick

Answer 1

にあなたがしている場合quantity * priceのJSON全体を集計してみると、別の計算として行うことができます。削除を処理するために

const json = [{ 
 
    "id" : "001", 
 
    "item" : "samsung", 
 
    "quantity" : 1, 
 
    "price" : 300, 
 

 
}, 
 
{ 
 
    "id" : "002", 
 
    "item" : "iphone", 
 
    "quantity" : 2, 
 
    "price" : 450, 
 

 
}]; 
 

 
const total = json.map(({quantity, price}) => quantity * price) 
 
        .reduce((a, b) => a + b) 
 
console.log(total)

、あなたのthis.state.jsonからそれを削除するにはfilterを使用する要素のidを受け入れる新しい関数を作ります。ここにベアボーンの例があります。

handleDelete(id) { 
    const filteredJSON = this.state.json.filter(item => { 
    return item.id !== id 
    }) 
    this.setState({json: filteredJSON}) 
} 

render() { 
    return (
<div> 
    {this.state.json.map((data, i) => { 
     const id = data.id 
     return (
     <div> 
      {data.item} 
      <button onClick={() => this.handleDelete(id)}> 
      {'delete'} 
      </button> 
     </div> 
    ) 
    })} 
</div> 
) 
}