如何解决使用数组React状态内的对象进行管理
我正在尝试管理数组内的对象。所以我有一个数组item
,里面有一些对象。
state = {
item: [
{
cls: 'powder',img: ariel_12,productName: 'Стиральный порошок Ariel 1,5 КГ',price: 200,heart: heart,qty: 1
},{
cls: 'powder',],loader: true
};
我添加了一种更改点击图像的方法,但是它更改了所有对象中的图像
likedBtn = () => {
this.setState((prevState) => ({
item: prevState.item.map(
obj => (obj.heart === heart ? Object.assign(obj,{heart: heartRed}): obj)
)
}));
console.log('liked');
}
如何分配该方法以防止作用于数组内的所有对象?
<ProductsItems liked={this.likedBtn} addToCart={this.clickHandler} cls={item.cls} img={item.img} productName={item.productName} price={item.price} heart={item.heart} />
很抱歉提供了这样愚蠢的解释,但希望您能理解。心为蓝色,单击时为红色。这就是我所需要的,但是当我只单击一颗心时,其他所有心也都会改变
解决方法
这可以做到
state = {
item: [
{
cls: 'powder',img: ariel_12,productName: 'Стиральный порошок Ariel 1,5 КГ',price: 200,heart: heart,qty: 1
},{
cls: 'powder',],loader: true
};
render(){
<div>
{this.state.item.map( (obj,index) => {
<div
key={index}
onClick={() => this.handleClick(index)}
liked={this.likedBtn}
cls={obj.cls}
img={obj.img}
productName={obj.productName}
price={obj.price}
heart={obj.heart}
>
</div>
})}
</div>
}
handleClick = index => {
this.setState( prevState => (prevState.item[index].heart = heartRed,prevState)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。