React 映射数组中的数字输入

Question

我目前正在开发我的第一个 react 应用程序，但我在尝试创建产品列表时遇到了一些问题。

基本上我正在尝试创建一个列表（从 JSON 文件解析为响应），这将使用户能够选择他们想要的产品数量。

但是，我创建的数量选择器正在更新映射数组的所有迭代，而不仅仅是选择器所在的那个。如何调整代码以便一次只更新一个计数器？

我的代码如下

import React, { Component } from "react";
import "./App.css";
import productdata from "./catalog.json";


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      BundleVal: "",
      ProductVal:"",
      CounterVal: 0
    }
  }

  updateBundle = (val) => {
    this.setState({
      BundleVal: val
    })
  };

  updateProduct = (val) => {
    this.setState({
      ProductVal: val
    })
  };

   counterincrease = (val) => {
     this.setState({
      CounterVal: this.state.CounterVal + 1
    }) 
  };

  counterdecrease = (val) => {
     this.setState({
      CounterVal: this.state.CounterVal - 1
    }) 
  };

  render() {
      const BundleProducts = [].concat(productdata.data.products).map((item, i) => 
        <div key={item.id}> 
        {item.id} <br />
        {item.name} <br />
        {item.description} <br />
        Installation: {item.price.installation} <br />
        Monthly: {item.price.recurring} <br />
        {this.state.CounterVal}
        <button onClick={this.counterincrease}>+</button>
        <button onClick={this.counterdecrease}>-</button>
        </div>
    );

    let bname = null;
    if (this.state.BundleVal === "1") {
          bname = "Bundle 1";
        } 
        else if (this.state.BundleVal === "2") {
          bname =  "Bundle 2";
        }   
        else if (this.state.BundleVal === "3") {

          bname =  "Bundle 3";
        }   
        else if (this.state.BundleVal === "4") {
          bname =  "Bundle 4";
        }
        else {bname = null;}    
    return (
      <div>
        <h2>Order</h2>
        Bundle Id: {this.state.BundleVal}
        <br/>
        Chosen Bundle: {bname}
        <br/>
        Number of Products: {this.state.ProductVal}

        <br/>
        <Bundle updateBundle={this.updateBundle} />
        {BundleProducts}
      </div>
    )
  }
}



class Bundle extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      BundleVal: ""
    }
  }

  updatebundle = (e) => {
    this.props.updateBundle(e.target.value);
    this.setState({BundleVal: e.target.value});
  };


  render() {
    return (
      <div>
        <h4>Bundle</h4>
        <input
          type="radio"
          value="1"
          onChange={this.updatebundle}
          checked={this.state.BundleVal==='1'}
        /> Bundle 1
         <input
          type="radio"
          value="2"
          onChange={this.updatebundle}
          checked={this.state.BundleVal==='2'}
        /> Bundle 2

      </div>
    )
  }
}


export default App;

我的 JSON 文件中的一些代码包含在下面

{
    "timestamp": 1502121471,
    "data": {
        "adverts": [],
        "bundles": [{
            "id": "1",
            "name": "Bundle 1",
            "description": "Bundle 1 Description",
            "maximumPeripherals": 32,
            "available": true,
            "count": 0,  
            "price": {
                "installation": "99.99",
                "recurring": "23.99"
            },
            "image": {
                "file": "bundle-one.png",
            },
            "products": ["1", "2", "3"]
        }, {
            "id": "2",
            "name": "Bundle 2",
            "description": "Bundle 2 Description",
            "maximumPeripherals": 32,
            "available": true,
            "count": 0,  
            "price": {
                "installation": "99.99",
                "recurring": "23.99"
            },
            "image": {
                "file": "bundle-two.png",

            },
            "products": ["1", "2", "2", "2", "2"]
        }],
        "products": [{
            "id": "1",
            "name": "Product 1",
            "description": "Product 1 Description",
            "maximumQuantity": 1,
            "isPeripheral": false,
            "isAvailable": true,
            "price": {
                "upfront": null,
                "installation": "0.00",
                "recurring": "0.00"
            },
            "image": {
                "file": "product-one.png",
            }
        }, {
            "id": "2",
            "name": "Product 2",
            "description": "Product 2 Description",
            "maximumQuantity": null,
            "isPeripheral": true,
            "isAvailable": true,
            "count": 0,  
            "price": {
                "upfront": "60.00",
                "installation": "9.60",
                "recurring": "1.25"
            },
            "image": {
                "file": "product-two.png",
            }
        }, {
            "id": "3",
            "name": "Product Three",
            "description": "Product Three Description",
            "maximumQuantity": null,
            "isPeripheral": true,
            "isAvailable": true,
            "count": 0,  
            "price": {
                "upfront": "132.00",
                "installation": "9.60",
                "recurring": "2.75"
            },
            "image": {
                "file": "product-three.png",
            }
        }]
    }
}

Answer 1

我的一位朋友建议以下内容来回答这个问题。本质上，数组现在将循环遍历这些值，并为每个输入添加一个不同的 id。

    updateQuantity = (e) => {
    var pCounter = this.state.ProductCounter;
    var el = parseInt(e.target.id.split("_")[1], 10);
    pCounter[el] = parseInt(e.target.value, 10);
    this.setState({ProductCounter: pCounter});
    console.log(this.state.ProductCounter);
  };

  render() {
      const BundleProducts = [].concat(productdata.data.products).map((item, i) => 
        <div key={item.id}> 
        {item.id} <br />
        {item.name} <br />
        {item.description} <br />
        Installation: {item.price.installation} <br />
        Monthly: {item.price.recurring} <br />
        <input
          type="number"
          onChange={this.updateQuantity}
          value={this.state.ProductCounter[item.id] || 0}
          id={"product_"+item.id}
        /><br />
        {this.state.ProductCounter[item.id] || 0}
        <hr />
        </div>
    );