我想使用forEachmap遍历具有多个对象的数组。这些对象具有一个键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
}


按照功能性方法进行反应,我们更喜欢mapreduce,因为它使您的代码更具声明性。因此,

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;


注意
没有使用setStatetotal是派生数据。派生数据不得处于状态。

但是,如果由于某些原因您仍然需要它,countTotal会看起来像这样,

countTotal() {
   this.setState(state => {
     return {
        total: state.items.reduce((acc, item) => {
          return acc + item.price;
        }, 0)
     };
   });
}

10-08 00:53
查看更多