javascript - 当状态是对象数组时更新状态。反应
问题描述
我正在使用上下文处理购物车。我的问题是更改具有对象数组的状态。
我的数组看起来像这样[{itemId: 'ps-5', qty:4}, {itemId: 'iphone-xr', qty:2}]
这是我的代码检查评论
export const CartContext = createContext()
class CartContextProvider extends Component {
state = {
productsToPurchase: []
}
addProduct = (itemId)=> {
if (JSON.stringify(this.state.productsToPurchase).includes(itemId)){
// Add one to the qty of the product
this.state.productsToPurchase.map(product=>{
if (product.itemId === itemId){
// This is wrong I have to use setState(), but the syntax is a little bit complex
product.qty = product.qty + 1
}
})
}
else {
this.state.productsToPurchase.push({itemId: itemId, qty: 1})
}
}
render() {
return (
<CartContext.Provider value={{...this.state, addProduct: this.addProduct}}>
{this.props.children}
</CartContext.Provider>
)
}
}
export default CartContextProvider;
解决方案
您正在直接更新状态,但您必须使用this.setState
它来更新它,
现场演示
addProduct = (itemId) => {
this.setState((oldState) => {
const objWithIdExist = oldState.productsToPurchase.find((o) => o.itemId === itemId);
return {
productsToPurchase: !objWithIdExist
? [...oldState.productsToPurchase, { itemId, qty: 1 }]
: oldState.productsToPurchase.map((o) =>
o.itemId !== itemId ? o : { ...o, qty: o.qty + 1 }
)
};
});
};
推荐阅读
- python - 正则表达式捕获组
- visual-studio - 如何在 Visual Studio 中使用多个 SCSS 文件的引用路径来利用 Intellisense,而无需将其添加到每个文件中?
- python - AttributeError:模块“cv2.cv2”没有属性“CascadeClassifer”(OpenCV 人脸检测)
- maven - 带有 Junit 的 QAF-Cucumber:Maven 安装在 ConfigurationManager 处抛出错误
- java - 我将 jsonString 转换为 Object 的功能不起作用
- html - 动态 1\2 列表
- html - 逃脱的正确方法| 使用 HTML 实体的字符
- javascript - 转到另一个页面并单击一次滚动到特定的 div (Reactjs)
- python - 如何在 AWS Lambda(Postgres、RDS)中运行 aws_s3.table_import_from_s3
- php - 如何优雅地解决“逗号问题”?