我目前正在处理我的第一个反应应用程序,而且我在尝试创建的产品列表方面遇到了一些麻烦。
基本上我正在尝试创建一个列表(解析为来自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",
}
}]
}
}
答案 0 :(得分:0)
我的一位朋友建议如下回答这个问题。基本上,数组现在将遍历值并添加不同的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>
);