React组件中如何使用reduce计算总量？

Question

我想计算我的数据库中包含的总金额。

我的class组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import formatCurrency from "./utils";
import { fetchCountries } from "../actions/countries.actions";
import Modal from "react-modal";
import { Zoom } from "react-awesome-reveal";

class Countries extends Component {
  constructor(props) {
    super(props);
    this.state = {
      country: null,
    };
  }
  componentDidMount() {
    this.props.fetchCountries();
  }

  openModal = (country) => {
    this.setState({ country });
  };

  closeModal = () => {
    this.setState({ country: null });
  };

  render() {
    const { country } = this.state;
    return (
      <div>
        {!this.props.countries ? (
          <div>Loading...</div>
        ) : (
          <ul className="countries">
            {this.props.countries.map((country) => (
              <li key={country._id}>
                <a
                  href={"#" + country._id}
                  onClick={() => this.openModal(country)}
                >
                  <br />
                  {country.title}
                </a>
                <br />
                {country.year}
                <br />
                **{country.phase}**
                <br />
                **{formatCurrency(country.amount)}**
              </li>
            ))}
          </ul>
        )}

        {country && (
          <Modal isOpen={true} onRequestClose={this.closeModal}>
            <Zoom>
              <button className="close-modal" onClick={this.closeModal}>
                X
              </button>
              <div>Modal</div>
              <div className="country-details">
                <div className="country-details-description">
                  <p>
                    <strong>{country.title}</strong>
                  </p>
                  <p>{country.description}</p>
                </div>
              </div>
            </Zoom>
          </Modal>
        )}
      </div>
    );
  }
}

export default connect(
  (state) => ({ countries: state.countries.filteredItems }),
  {
    fetchCountries,
  }
)(Countries);

所以我正在寻找如何呈现数学运算，例如 总金额 即 {country.amount} of actual 即 {country.phase === "actual}.

在这种情况下我不知道如何使用.reduce。

Answer 1

下面是如何使用 reduce 来计算 phase 项的 amount 的总和，如 actual:

const countries = [{amount: 10,phase: 'actual'}, {amount: 10, phase: 'B'}, {amount: 15, phase: 'A'}, {amount: 30, phase: 'actual'}, ]

console.log(
  countries.reduce(
    (acc, curr) => curr.phase === "actual" ? acc + curr.amount : acc, 0
))

以下是用 JSX 编写的方法：

<p>
  Total:{" "}
  {countries.reduce(
    (acc, curr) => (curr.phase === "actual" ? acc + curr.amount : acc), 0)
  }
</p>

React组件中如何使用reduce计算总量？

How to use reduce to calculate the total amount in React component?

javascript

reduce

reactjs