映射时增加或减少react数组中的值

如何解决映射时增加或减少react数组中的值

  export default class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedForCart: [],checkOut: true,priceQuantity: undefined,total: undefined,};
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.state.selectedForCart &&
          this.state.selectedForCart.map((v,i) => {
            return (
              <Container className="mt-5" key={i}>
                <Row>
                  <Col lg={2} md={2} sm={12}>
                    <p>
                      Price:&emsp;&#8377;
                      {v.priceTaxIncluded}
                    </p>
                    <p style={{ fontSize: "10px" }}>Tax inclusive</p>
                  </Col>

                  <Col lg={2} md={2} sm={12}>
                    <Form.Group>
                      <Form.Label>Quantity</Form.Label>
                      <Form.Control
                        type="number"
                        placeholder="Quantity"
                        value={1}
                        onChange={(e) => {
                           this.setState({
                           priceQuantity: e.target.value

                           });
                          console.log(v.priceTaxIncluded * e.target.value);
                        }}
                      />
                    </Form.Group>
                  </Col>
                  <Col lg={2} md={2} sm={12}>
                    {this.state.checkOut && (
                      <>
                        <p>{this.state.priceQuantity}</p>
                      </>
                    )}
                  </Col>
                </Row>
              </Container>
            );
          })}
        <Footer />
      </div>
    );
  }
}

在上面的代码中，我正在映射状态对象“”值中的项目数组。而且，如果我增加特定项目，则该特定项目的数量应仅增加。但是，并非所有项目都在增加。价格也应该乘以增加的值并显示出来...

谢谢。

As in this image,I'm changing the quantity. But If I change the quantity of a product,then its reflecting the price for all products. As I have only one state object

解决方法

您可以将priceQuantity绑定到输入值。然后有条件地在最后一列进行渲染。当您尝试在最后一列中打印priceQuantity时，它将在所有行中显示。

 this.state = {
      ...
      priceQuantity: 0,..
    };

{this.state.selectedForCart &&
          this.state.selectedForCart.map((v,i) => {
            return (
              <Container className="mt-5" key={i}>
                <Row>
                  <Col lg={2} md={2} sm={12}>
                    <p>
                      Price:&emsp;&#8377;
                      {v.priceTaxIncluded}
                    </p>
                    <p style={{ fontSize: "10px" }}>Tax inclusive</p>
                  </Col>

                  <Col lg={2} md={2} sm={12}>
                    <Form.Group>
                      <Form.Label>Quantity</Form.Label>
                      <Form.Control
                        type="number"
                        placeholder="Quantity"
                        value={this.state.priceQuantity}
                        onChange={(e) => {
                           this.setState({
                           priceQuantity: e.target.value

                           });
                          console.log(v.priceTaxIncluded * e.target.value);
                        }}
                      />
                    </Form.Group>
                  </Col>
                  <Col lg={2} md={2} sm={12}>
                    {this.state.checkOut && (
                      <>
                        <p>{this.state.priceQuantity ? v.priceTaxIncluded * this.state.priceQuantity : 0}</p>
                      </>
                    )}
                  </Col>
                </Row>
              </Container>
            );
          })}