在 React 中显示总和

我有以下查询。我正在制作一个简单的应用程序，其中添加了产品，并且这些（对象）具有名称和价格。我想要做的是在我渲染变量的地方，当我添加一个产品时出现总和，而不是在我看来是：（加 1） 123..

将添加的单击事件出现的值添加到我是有效的，但它显示的不是总数，而是总和的历史。

let i = 0;

let total = this.state.list.map((x, i) => {
 let val = parseInt(x.price);
 i += val;
 return i;   
 console.log('suma ', i); 
})

return(
  <Container>
    <Row>
      <Col sm='6'>
        <Form>
          <FormGroup>
            <Label>Producto</Label>
            <Input type='text' name='product' onChange={ e => this.getData(e) } placeholder='añade un item'></Input>
          </FormGroup>
          <FormGroup>
            <Label>Precio</Label>
            <Input type='text' name='price' onChange={ e => this.getData(e) } placeholder='añade un item'></Input>
          </FormGroup>
          <Button className='btn btn-success' onClick={ e => this.submitData(e) } >Añadir</Button>
        </Form>
      </Col>
      <Col sm='6' className='mt-4 border' style={{ overflowY: 'scroll', position: 'relative', height: '200px'}}>
      <h4>Productos {listado.length}</h4>
      <TransitionGroup>
      {listado}
      </TransitionGroup>
      </Col>
    </Row>
    <Row>
      <Container className='mt-4'>
       {total} **aqui es donde me aparece el 123..en vez del total**
      </Container>
    </Row>
  </Container>

);