Arrays 如何访问状态数组中的属性
我在react组件的状态属性中有一个数组。 如何访问此实例以更改渲染合成 如何使用箭头功能访问hasDiscount功能 启用缩略图。所以它的旧价格被删除了,它的特色是折扣价。 我想,如果对象在加载时有折扣价格,折扣价格必须显示有主价格Arrays 如何访问状态数组中的属性,arrays,reactjs,state,Arrays,Reactjs,State,我在react组件的状态属性中有一个数组。 如何访问此实例以更改渲染合成 如何使用箭头功能访问hasDiscount功能 启用缩略图。所以它的旧价格被删除了,它的特色是折扣价。 我想,如果对象在加载时有折扣价格,折扣价格必须显示有主价格 import Thumbnail from './thumbnail'; class Thumbnails extends Component { state = { thumbnails: [ {id: 1,
import Thumbnail from './thumbnail';
class Thumbnails extends Component {
state = {
thumbnails: [
{id: 1, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 1", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
{id: 2, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 2", category1: 'component', category2: 'tabs', price: 994, hasDiscount: 0},
{id: 3, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 3", category1: 'component', category2: 'tabs', price: 949, hasDiscount: 0},
{id: 4, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 4", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
]
};
hasDiscountTag = () => {
))
}
render() {
return (
<div className="thumbnails-container">
<h2 className="section-title">Components</h2>
<div className="thumbnails-container-wrapper">
{this.state.thumbnails.map(thumbnail => (
<Thumbnail
onLoad = {this.hasDiscountTag()}
key={thumbnail.id}
name={thumbnail.title}
id={thumbnail.id}
price={thumbnail.price}
imageUrl={thumbnail.imageUrl}
href={thumbnail.href}
category1={thumbnail.category1}
category2={thumbnail.category2}
hasDiscount = {thumbnail.hasDiscount}
>
</Thumbnail>
))}
</div>
</div>
);
}
}
export default Thumbnails;```
你可以试试这种方法
import Thumbnail from './thumbnail';
class Thumbnails extends Component {
state = {
oldPrice: 0,
thumbnails: [
{id: 1, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 1", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
{id: 2, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 2", category1: 'component', category2: 'tabs', price: 994, hasDiscount: 0},
{id: 3, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 3", category1: 'component', category2: 'tabs', price: 949, hasDiscount: 0},
{id: 4, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 4", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
]
};
hasDiscountTag = (price, hasDiscount) => {
this.setState({oldPrice: price-hasDiscount})
))
}
render() {
return (
<div className="thumbnails-container">
<h2 className="section-title">Components</h2>
<h2 className="section-title">Price: {this.state.oldPrice}</h2>
<div className="thumbnails-container-wrapper">
{this.state.thumbnails.map(thumbnail => (
<Thumbnail
onLoad = {this.hasDiscountTag}
key={thumbnail.id}
name={thumbnail.title}
id={thumbnail.id}
price={thumbnail.price}
imageUrl={thumbnail.imageUrl}
href={thumbnail.href}
category1={thumbnail.category1}
category2={thumbnail.category2}
hasDiscount = {thumbnail.hasDiscount}
>
</Thumbnail>
))}
</div>
</div>
);
}
}
export default Thumbnails;