react实现购物车的全选/不全选以及价格数量的增加与减少

当我们添加完商品的数量，传给后台，在从购物车页面从后台把刚才添加购物车的数据拿过来，这个时候就要写全选/不全选以及价格数量的增加与减少的逻辑了,代码如下：

import React, { Component } from 'react'
import './Cart.css'
import axios from 'axios'

export default class Cart extends Component {
  state={
    result:[],
    allChecked:false,
    totalPrice:0
  }

  checkNum=0 //初始化

    componentDidMount(){
      axios.get('http://xxxxxxx(网址)/xxxx/xxx/list')
      .then(res=>{
        console.log(res.data.result);
        this.setState({
          result:res.data.result
        })
      }).catch(err=>{
        console.log(err);
      })
    }
    // 价格的增加
    addData=o=>{
      o.goodsNum++
      this.priceData()
    }
    //价格的减少
    subNum=o=>{
      o.goodsNum--
      this.priceData()
  }
    // 单选的逻辑
    itemDada=(event, e)=>{
      console.log(this.state.result.length);
      console.log(event.target.checked);//单选的点击状态
      const checked=event.target.checked
      e.checked=checked
      if(checked) this.checkNum++
      else this.checkNum--
      if(this.checkNum==this.state.result.length){ //当状态和数组的长度一致，将全选的状态（allChecked）给为true
        this.setState({allChecked:true})
      } else {
        this.setState({allChecked:false})
      }
      this.priceData()
    }

    //全选

    allCheckedData=e=>{
      console.log(e.target.checked);//打印全选的状态
      this.setState({
        allChecked:e.target.checked
      })
      const {result} = this.state
      result.map(item=>item.checked=e.target.checked) //将全选的状态给下面的单个的状态
      this.setState({
        result
      })
      this.priceData()
    }

    // 价钱的变化

    priceData=()=>{
      let price=0
      const {result} = this.state
      result.forEach(e=>{
        if(e.checked) price +=(e.goodsNum)*(e.goodsPrice)
      })
      console.log(price);
      this.setState({
        totalPrice:price
      })
    }
  render() {
    const {allChecked,totalPrice} =this.state
    return (
      <div>
        <input type="checkbox" name="" id="" checked={allChecked}  onChange={this.allCheckedData}  />全选
        {
         this.state.result.map(e=>
            <div className='checkbox-items' key={e.goodsId}>
            {/* checked={e.checked || false} */}
              <input type="checkbox"  checked={e.checked||false} onChange={event=>this.itemDada(event,e)}/>
              <span>{e.goodsName}</span>
              <span>单价：{e.goodsPrice}</span>
              <div>
                <button onClick={() => this.subNum(e)}>-</button>
                <span>{e.goodsNum}</span>
                <button onClick={()=>this.addData(e)}>+</button>
              </div>
            </div>
          )
        }
        <div>总金额为：{totalPrice}</div>
      </div>
    )
  }
}

效果图如下：