Arrays 映射时增加或减少react数组中的值 导出默认类购物车扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 已选择购物车：[]， 结帐：是的， 价格数量：未定义， 总计：未定义， }; } render（）{ 返回( {this.state.selectedForCart&& this.state.selectedForCart.map（（v，i）=>{ 返回(

价格：&emsp；&8377； {v.pricetaxinclude}

含税

量 { 这是我的国家({ 价格数量：e.target.value }); console.log（v.pricetax包括*e.target.value）； }} /> {this.state.checkOut&&( {this.state.priceQuantity}

)} ); })} ); } } 在上面的代码中，我将从state对象“”值映射一个项目数组。如果我增加一个特定的项目，那么这个特定项目的数量只会增加。但并非所有项目都在增加。而且价格应该乘以增加的值，并且应该显示

多谢各位

---

您可以将价格数量绑定到输入值。然后在最后一列中有条件地呈现。当您试图在最后一列中打印priceQuantity时，它将显示所有行

  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>
    );
  }
}

this.state={
...
价格数量：0，
..
};
{this.state.selectedForCart&&
this.state.selectedForCart.map（（v，i）=>{
返回(

价格：&emsp；&8377；
{v.pricetaxinclude}

含税
量
{
这是我的国家({
价格数量：e.target.value
});
console.log（v.pricetax包括*e.target.value）；
}}
/>
{this.state.checkOut&&(
{this.state.priceQuantity？v.priceTaxInclude*this.state.priceQuantity:0}

)}
);
})}

您在onChange中设置的状态，您在哪里访问它？另外，在映射时，提供父元素的键，即Container else React，无法理解您正在更改哪一行。@Rohitha先生/女士，我已经更新了代码，您能检查一下吗？我正在访问状态，请检查我上传的图像。它仍然像sameCan一样显示，如果您将代码添加到codesandbox，那么检查起来就更容易了。

 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>
            );
          })}