React修改数组里的指定内容,显示数组内价格的和

先来代码,

action

function cart(state = {data:[],loading:true},action){
    switch(action.type){
        case "CARTLIST_UPDATA":
            return{
                loading:true,
                data:state.data
            }
        case "CARTLIST_SUCC":
            return{
                loading:false,
                data:action.data
            }
        case "CARTLIST_REEOR":
            return{
                loading:false,
                data:[]
            }
        default:
            return state;
    }
}
export default cart;

购物清单一览页面

import React, { Component } from 'react';
import {Link} from "react-router-dom";
import axios from 'axios';
import {connect} from "react-redux";
import { Layout,List,Row,Col,Button} from 'antd';
const {  Content } = Layout;
class CartList extends Component{
    constructor(arg){
        super(arg);
        this.state = {
            count:'',
            total:''
        };
        this.getData();
    } 
    getData(){
        this.props.dispatch((dispatch)=>{
            dispatch({
                type:"CARTLIST_UPDATA"
            });
             axios.get("https://5f3b67bbfff8550016ae5344.mockapi.io/api/v1/cartList")
                .then((res)=>{
                    dispatch({
                        type:"CARTLIST_SUCC",
                        data: res.data
                    });
                })
                .catch((error)=>{
                    dispatch({
                        type:"CARTLIST_REEOR",
                        data: error
                    });
                })
        });
    }
    handleCount=(e)=>{
        this.setState({
            count:e.target.value
        })
    }
    doChange=()=>{

    }
    doSubmit=(e)=>{
        e.preventDefault();
        axios({
            method: 'post',
            url: '',
            data: {}
          });
        this.props.history.push("/addressConfirm/");
    }
    render(){
        let {data,loading} = this.props;
        console.log(data);
        return(
             <Content style={{ padding: '0 50px' }}>
                <Layout className="site-layout-background" style={{ padding: '24px 0' }}> 
                            <Content style={{ padding: '0 24px', minHeight: 840 }}>
                                <div className = "cartList" style = {{textAlign:"left"}}>
                                    <br/>
                                    <Link to = '/'>首页</Link>
                                    <span style = {{marginLeft:"50px",marginRight:"50px"}}>购物车内容</span>
                                    <br/>
                                </div>                    
                                <Row>
                                    <Col span={18}>
                                    <hr/>
                                    <div>                          
                                    <List 
                                        loading = {loading}
                                        itemLayout="vertical" 
                                        size="large" 
                                        pagination={{onChange: page => {console.log(page);},pageSize: 10}} 
                                        dataSource={data} 
                                        renderItem={item => (
                                                    <List.Item>
                                                        <img width={280} src={item.pic} style = {{float:"left"}}/>
                                                        <div style = {{textAlign:"left"}}>  
                                                        <h1>{item.itemName}</h1> 
                                                            担当部署:{item.szk}<br/>
                                                            在庫数:{item.storage}<br/>
                                                            価額:{item.price}<br/>
                                                            <br/>
                                                            <div>
                                                            购买数量: <input type = "text" defaultValue = {item.count} onChange = {this.handleCount} style = {{width:"50px"}}/>
                                                            &nbsp;&nbsp;&nbsp;<Button  onClick = {this.doChange} >变更</Button>  &nbsp;&nbsp;&nbsp;
                                                            <Button  onClick = {this.doDelete} >删除</Button> 
                                                            </div> 
                                                        </div>
                                                    </List.Item>
                                                )
                                            }
                                    />
                                    <br/>
                                    </div>
                                    </Col>
                                    <Col span={6}>
                                    <div style = {{float:"right",position:"absolute",left:"50px",top:"5px"}}>
                                    <form style = {{borderRadius:"10%",border:"1px solid",width:"300px",height:"250px"}}>
                                        <br/>
                                        <h2 style={{textAlign:"left"}}>购物车</h2>
                                        <div style={{textAlign:"center"}}> 
                                        <br/>
                                        <h3>小計:{this.state.total} </h3>
                                        <br/>
                                        <br/>
                                        <input type = "submit" value = "购买" onClick = {this.doSubmit} /><br/><br/>
                                        </div>
                                    </form>
                                    </div>
                                    </Col>
                                </Row>                              


                            </Content>
                </Layout>
            </Content>
        )
    }
}
export default connect(state=>(state.cart))(CartList);

取到模拟数据后,遍历循环展示已经成功了。
但是我想修改购买数量的时候该怎么办。
想要实现的功能:
1.购买数量的输入框里填入数字后,点击变更会反应到模拟数据中。
2.删除按下后会把模拟数据里的那条数据删掉。
3.小计处显示当前购物车所有商品的总价

https://www.jianshu.com/p/cfb4ef3d1fad