[英]TypeError: Cannot assign to read only property 'value' of object react after using the value of state in a function
I am trying to develop an E-commerce website with a product detail page .我正在尝试开发一个带有产品详细信息页面的电子商务网站。 Users may select available options of the product.
用户可以选择产品的可用选项。 Supposed I choose a shoe and selected size 42 , when I click "Add to Cart" button, it triggers
handleAddToCart
once.假设我选择了一只鞋子并选择了尺码 42 ,当我单击“添加到购物车”按钮时,它会触发一次
handleAddToCart
。 When that is done, if the user wants to add different variations he can just click on differentVariationBox
and then again click "Add to Cart" and this should add the newly selected product to cart完成后,如果用户想要添加不同的变体,他只需点击
differentVariationBox
,然后再次点击“添加到购物车”,这应该会将新选择的产品添加到购物车
The error comes only after handleAddToCart
is executed and handleVariation
will cause an error.只有在执行了
handleAddToCart
之后才会出现错误,并且handleVariation
会导致错误。 I would like to know why this error is happening and how to solve it.我想知道为什么会发生这个错误以及如何解决它。
When I try to change the product option I got the following error当我尝试更改产品选项时,出现以下错误
const handleAddToCart = () => {
// The selected variation is an array which track the selected attributes but its
// order depends on the user click on the attributeswe need to sort them in the order we have
// Received from the server because we will create an unique key for the cart item to know if the
// Product is alredy in cart with same attributes
// 😎 example i order shoe with id black-puma with size 42 and color black
// The id will become black-puma+size=42+color=black now i can track weather this variation product exist
const order = product.attributes.map((attribute) =>
this.state.selected_variation.find((v) => v.type === attribute.id)
);
// Checking if the length of the variation is equal to the length of the attributes
// This will ensure all the variation is selected
if (this.state.selected_variation.length ===product.attributes.length) {
const data = {
variation: order,
product: product,
quantity: this.state.quantity,
id:`${product.id}+${order.map((item) => `${item.type}=${item.value}`).join("+")}`
};
this.props.addToCart(data);
} else {
alert("Please Select all the variations or The selected variation is already exist in the cart");
}
};
// Function that will handle the variation selection
const handleVariation = (e) =>{
let type = e.target.name;
let value = e.target.value;
// Checking is the selected attribute exist
let index = this.state.selected_variation.findIndex((x)=>{
return x.type === type
})
// if not exist then add it
if(index === -1){
this.setState({
selected_variation: [...this.state.selected_variation, {type,value}]
})
}else{
const newData = [...this.state.selected_variation];
newData[index].value = value
this.setState({
selected_variation:newData,
})
}
}
SO Handle variation triggered when SO句柄变化触发时
Any of the variation is change handleVariation will be trigger when there is change in input radio state任何变化都是变化句柄变化将在输入无线电状态发生变化时触发
Problem with your code is here:您的代码有问题:
else{
const newData = [...this.state.selected_variation];
newData[index].value = value
this.setState({
selected_variation:newData,
})
}
First, you copied old state using spread.首先,您使用传播复制了旧状态。 Like that you just created new array, but array elements are referencing to that same element from the current state (reference is unmodified since you shallowly copied only array on the top level).
就像您刚刚创建了新数组一样,但数组元素正在从当前状态引用相同的元素(引用未修改,因为您仅在顶层浅层复制了数组)。 After that you accessed element with index, and since elements in array were not copied
newData[index]
reference element directly from this.state
.之后,您访问了带有索引的元素,并且由于数组中的元素没有直接从
this.state
复制newData[index]
引用元素。 Since you are trying to mutate state directly react will throw you an error, it won't let you do that because it expect to mutate only using this.setState
.由于您尝试直接改变状态,因此 react 会引发错误,因此它不会让您这样做,因为它希望仅使用
this.setState
进行突变。
Rewrite to this:重写为:
else{
this.setState(prevState => ({selected_variation:
prevState.selected_variation.map((el, ind) => ind === index ? { ...el, value} : el })
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.