我想使用forEach
或map
遍历具有多个对象的数组。这些对象具有一个键price
和一个值。我正在尝试使用forEach
,但无法正常工作。这是我的组件:
import React, { Component } from 'react';
import {addCart} from './Shop';
import { connect } from 'react-redux';
export class Cart extends Component {
constructor(props) {
super(props);
this.state = {items: this.props.cart,cart: [],total: 0};
}
...
countTotal() {
this.state.cart.forEach((item, index) => {
console.log(this.state.items);
this.state.total = this.state.total + this.state.items.price;
console.log(this.state.total);
})
}
...
render() {
return(
<div className= "Webcart" id="Webcart">
</div>
);
}
}
...
在
countTotal
中,console.log(this.state.items)
输出各种看起来像的对象item:"Hoodie"
price:25
size:"large"
如何遍历每个对象并获取
price
值,以便可以将其添加到函数中? 最佳答案
要回答如何遍历数组,可以像使用C之类的语言一样,在javascript中使用简单的for
循环。
let total = 0;
for(let i = 0; i < items.length; i++) {
total += item[i].price
}
按照功能性方法进行反应,我们更喜欢
map
和reduce
,因为它使您的代码更具声明性。因此,const total = items.reduce((acc, item) => {
return acc + item.price;
}, 0)
然后,您的代码将如下所示:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
export class Cart extends Component {
constructor(props) {
super(props);
this.state = {items: props.cart,cart: [],total: 0};
}
countTotal() {
return this.state.items.reduce((acc, item) => {
return acc + item.price;
}, 0)
}
render() {
return(
<div className= "Webcart" id="Webcart">
{ this.countTotal() }
</div>
);
}
}
class App extends Component {
render() {
return (
<Cart cart={
[
{
item:"Hoodie",
price:25,
size:"large"
},
{
item:"Gloves",
price: 12,
size:"large"
},
{
item:"boots",
price:30,
size:"large"
},
]
} />
);
}
}
export default App;
注意
没有使用
setState
。 total
是派生数据。派生数据不得处于状态。但是,如果由于某些原因您仍然需要它,
countTotal
会看起来像这样,countTotal() {
this.setState(state => {
return {
total: state.items.reduce((acc, item) => {
return acc + item.price;
}, 0)
};
});
}