Question

我想使用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值，以便我可以在我的函数中添加它？

Answer 1

您不应直接分配给州，而应使用setState代替。 forEach很好，但我建议您跳过forEach和map并使用reduce，只从对象中提取价格键：

countTotal() {
   this.setState({
      total: this.state.cart.reduce((total, { price }) => total + price, 0)
   });
}

Answer 2

要回答如何遍历数组，你可以在javascript中使用简单的for循环，就像在C语言中一样;

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)
     };
   });
}

如何遍历一组对象并在React中获取特定的键值？

2 个答案: