[英]How to add an object to an array on the first click and update one of its values with every click made afterwards
I am working on a React shopping cart and I am trying to accomplish the following based on an array that I will present after I explain my issues:我正在开发一个 React 购物车,我正在尝试根据我在解释我的问题后将呈现的数组来完成以下操作:
1) I am trying to check if the size that the client is requesting is available. 1)我正在尝试检查客户请求的尺寸是否可用。
2) If it is not available I want to run a function that will: 2)如果它不可用,我想运行一个 function,它将:
2A) Add the chosen object to the array. 2A) 将选择的 object 添加到阵列中。
2B) On each subsequent click I want to update the stock to make sure that it alerts the client that the item is not in stock any more and I want to increase a new element that I want to call "quantity" by one. 2B)在随后的每次点击中,我想更新库存以确保它提醒客户该项目不再有库存,并且我想将我想称为“数量”的新元素增加一个。
3) This is my current array of sizes: 3)这是我目前的尺寸数组:
[ 0: size: 3 stock: 140
_id: "5d903adb01cdab06932b5566"
1: size: 3.5 stock: 130
_id: "5d903adb01cdab06932b5565"
2: size: 4 stock: 10
_id: "5d903adb01cdab06932b5564"
3: {_id: "5d903adb01cdab06932b5563", size: 4.5, stock: 30}
4: size: 5 stock: 53
_id: "5d903adb01cdab06932b5562" ]
4) These are the functions that I am running: 4)这些是我正在运行的功能:
onClick={() => this.alertBox(prod, arr, item)}
onClick={() => this.alertBox(prod, arr, item)}
alertBox = (product, products, count) => {
console.log(count)
let newStock;
let clickedSize;
let selectedProduct;
if (product.stock === 0) {
alert('The item is currently out of stock')
} else {
newStock = product.stock -= 1;
clickedSize = product.size;
selectedProduct = product._id;
let newProducts;
let quantity = 0;
products.map((item) => {
return item._id === product._id ?
newProducts = [...this.state.chosenSize , {...item, ...newStock }]
: product
});
const tester = [];
const result = [];
const newSize = [];
let quantities = [];
let items;
let newIt;
newProducts.forEach(function(el) {
if (tester.indexOf(el._id) === -1) {
tester.push(el._id)
result.push(el)
items = {...el}
}
});
let newArray = result.map((item, i) => Object.assign({}, item, item.stock -= 1));
this.setState(prevState => ({
chosenSize: newArray
}))
}
}
and和
onClick={() => this.onUpdateItem(idx, arr, prod)}
onClick={() => this.onUpdateItem(idx, arr, prod)}
onUpdateItem = (i, product, prod) => {
let newProd = product.stock;
this.setState({
chosenSize: product.map(el => (el._id === prod._id ? Object.assign({}, el, el.stock -= 1) : el))
});
};
7) I want the object to update to something like this after each click. 7) 我希望 object 在每次点击后更新为类似的内容。
3: {_id: "5d903adb01cdab06932b5563", size: 4.5, stock: 30, quantity: 1 }
3:{_id:“5d903adb01cdab06932b5563”,尺寸:4.5,库存:30,数量:1}
to
至
3: {_id: "5d903adb01cdab06932b5563", size: 4.5, stock: 29, quantity: 2 }
3:{_id:“5d903adb01cdab06932b5563”,尺寸:4.5,库存:29,数量:2}
to
至
3: {_id: "5d903adb01cdab06932b5563", size: 4.5, stock: 28, quantity: 3 }
3:{_id:“5d903adb01cdab06932b5563”,尺寸:4.5,库存:28,数量:3}
This is the code sandbox for this project although for whatever reason it is not rendering my components anymore.这是该项目的代码沙箱,尽管出于某种原因它不再呈现我的组件。 The code is in the ProductPage file codesandbox.io/s/mystifying-roentgen-7mp0t .
该代码位于 ProductPage 文件codesandbox.io/s/mystifying-roentgen-7mp0t中。
My apologies, the code sandbox now works, you just have to click on one of the items and it will take you to the product page http://codesandbox.io/s/mystifying-roentgen-7mp0t抱歉,代码沙箱现在可以工作了,您只需单击其中一项,它将带您到产品页面http://codesandbox.io/s/mystifying-roentgen-7mp0t
You should use import { Link } from "react-router-dom";
您应该使用
import { Link } from "react-router-dom";
to make the Link
work in Product.js
.使
Link
在Product.js
中工作。 I just made the changes to the code sandbox我刚刚对代码沙箱进行了更改
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.