now is the number of clicks changing, solving?

import React, { Component } from "react";
import axios from "axios";
import Loading from "./../public/loading";
import Active from "./../index/Active";
// import {jia,jian} from "./../../redux/action";
// import { connect } from "react-redux";
class Buy extends Component {
  constructor(props){
    super(props);
    this.state = {
      loadingFlag:true,
      cartList:[],
      defaultVal:1
    };
    this.showNum = this.showNum.bind(this);
    this.delList = this.delList.bind(this);
    this.numAdd = this.numAdd.bind(this);
    this.numDel = this.numDel.bind(this);
  }
  componentDidMount(){
    this.setState({
      loadingFlag:false
    });
    let _this = this;
    axios.get("./data/test.json").then(function (response) {
      console.log(response);
      _this.setState({
        cartList:response.data.cartList
      });
    }).catch(function (error) {
      console.log(error);
    });
  }
  showNum(e){
    console.log(e.target.value);
  }
  delList(e){
    let lId = e.target.getAttribute("data-id");
    let cartLists = this.state.cartList;
    this.state.cartList.forEach((item,i) => {
      if(lId === item.id){
        cartLists.splice(i,1);
      }
    })
    console.log(cartLists);
    this.setState({
      cartList:cartLists
    });
  }
  numAdd(){
    this.setState({
      defaultVal:PPthis.state.defaultVal
    });
    console.log(this.state.defaultVal);
  }
  numDel(){
    this.setState({
      defaultVal:--this.state.defaultVal
    });
    console.log(this.state.defaultVal);
  }
  render() {
    // const { PayIncrease, PayDecrease } = this.props;
    return (
      <div className="buy">
        <Loading loadingFlag = {this.state.loadingFlag} />
        <h1 className="buy-h1"></h1>
        <div className="buy-box">
          <div className="buy-none" style={{display:"none"}}>
            <i className="iconfont icon-gouwuche"></i>
            

            <button></button>
          </div>
          <div className="buy-has" key="1">
              <ul>
                  {this.state.cartList.map((item) => {
                    return (
                      <li key={item.id}>
                        <div className="radio">
                          <input type="checkbox" />
                        </div>
                        <div className="img">
                          <img src={item.img} alt={item.name} />
                        </div>
                        <div className="info">
                          
{item.name}
                          
{item.color} {item.memory}
                          
{item.price}
                          <div className="num">
                              <input type="button" defaultValue="-" onClick={this.numDel} />
                              <input type="number" className="nums" value={this.state.defaultVal} onChange={(e) => this.showNum(e)} />
                              <input type="button" defaultValue="+" onClick={this.numAdd} />
                          </div>
                        </div>
                        <div className="del"><i data-id={item.id} className="iconfont icon-guanbi" onClick={(e) => this.delList(e)}></i></div>
                      </li>
                    )
                  })}
              </ul>
              <div className="bottom-cart">
                <span className="b-handle"><input type="radio" /><em></em></span>
                <span className="b-price">:4699.00<br />:</span>
                <span className="b-pay">
                  <a href="/">(0)</a>
                </span>
              </div>
          </div>
        </div>
        <Active name="" />
      </div>
    );
  }
}

//
// function mapStateToProps(state) {
//   return {
//       num:state
//   }
// }
//
// function mapDispatchToProps(dispatch) {
//   return {
//       PayIncrease: () => dispatch(jia),
//       PayDecrease: () => dispatch(jian)
//   }
// }
export default Buy;
// export default connect(mapStateToProps, mapDispatchToProps)(Buy);