在 React 中捕获 onChange 事件时如何更新输入值?

Question

我在CartHeader组件中的项目总数方面遇到问题。显然我已经添加了每种产品的数量，但结果与我预期的不同？有人能为我找出错误吗？我衷心感谢。

import CartHeader from "./CartHeader";
import CartBody from "./CartBody";
import CartFooter from "./CartFooter";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
products: [
{
id: 1,
name: "Apple Watch Series 5",
description: "Description for Apple Watch Series 5",
img:
"https://bachlongmobile.com/media/catalog/product/cache/2/image/040ec09b1e35df139433887a97daa66f/2/0/2076130625_1_1_1.jpg",
price: 499.99,
quantity: 1
},
{
id: 2,
name: "iPhone 11 Pro Max",
description: "Description for iPhone 11 Pro Max",
img:
"https://cdn.fptshop.com.vn/Uploads/Originals/2019/9/11/637037687763926758_11-pro-max-xanh.png",
price: 1099.99,
quantity: 1
},
{
id: 3,
name: "Macbook Pro 16 inch",
description: "Description for Macbook Pro 16 inch",
img: "https://shopdunk.com/wp-content/uploads/2019/11/mac16inch.jpg",
price: 2399.99,
quantity: 1
},
{
id: 4,
name: "iPad Pro 12.9 inch",
description: "Description for iPad Pro",
img:
"https://cdn.fptshop.com.vn/Uploads/Originals/2019/1/11/636828015979564724_ipad-pro-12-9-xam-1.png",
price: 999.99,
quantity: 1
},
{
id: 5,
name: "AirPods Pro",
description: "Description for AirPods Pro",
img:
"https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MWP22?wid=1144&hei=1144&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1572990352299",
price: 249.99,
quantity: 1
}
]
};
}
onRemoveProduct = id => {
const newProducts = this.state.products;
// Tìm vị trí sản phẩm cần xoá
let index = newProducts.findIndex(product => product.id === id);
// Kiểm tra nếu tìm thấy thì mới xoá
if (index !== -1) {
newProducts.splice(index, 1);
this.setState({
products: newProducts
});
}
};
handleChange = (e, id) => {
const { products } = this.state;
const indexProduct = products.findIndex(product => product.id === id);
products[indexProduct].quantity = e.target.value;
this.setState({ products });
};
render() {
const products = this.state.products;
let numberItems = 0;
let subTotal = 0;
products.map(product => {
numberItems += product.quantity;
subTotal += product.price * product.quantity;
});
return (
<main>
<CartHeader numberItems={numberItems} />
<CartBody
products={products}
onRemoveProduct={this.onRemoveProduct}
handleChange={this.handleChange}
/>
<CartFooter subTotal={subTotal} />
</main>
);
}
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我有没有误解过这个问题。链接代码沙盒：https://codesandbox.io/s/thirsty-hill-6w2ex

Answer 1

handleChange = (e, id) => {
const { products } = this.state;
const indexProduct = products.findIndex(product => product.id === id);
products[indexProduct].quantity = Number(e.target.value);
this.setState({ products });
};

https://codesandbox.io/s/loving-hertz-vfpjw

Answer 2

问题是您正在使用带有字符串的+。所以当你计算总数时，你会得到奇怪的结果：

const result = '1' + '1' + '2'
console.log(result) // '112'

将呈现方法更改为：

products.map(product => {
numberItems += Number(product.quantity);
console.log(numberItems);
subTotal += Number(product.price) * Number(product.quantity);
});

Answer 3

你需要在map循环中返回值

products.map(product => {
numberItems += product.quantity;
subTotal += product.price * product.quantity;
return { numberItems, subTotal  }
});