如何解决如何使用reduce来计算React组件中的总量？
我想计算我的数据库中包含的总金额。
我的类组件：
Environment所以我正在寻找如何呈现数学运算，例如 total amount ie struct View5: View {
@Environment(\.resetTabView) var reset
var body: some View {
vstack {
Text("This is view 5")
Button(action: {
reset.newValue.wrappedValue = true
},label: {
Text("reset tab view")
})
}
}
}
of actual ie 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}。
解决方法
这里是如何使用reduce来计算amount为phase的项目的actual的总和：
const countries = [{amount: 10,phase: 'actual'},{amount: 10,phase: 'B'},{amount: 15,phase: 'A'},{amount: 30,]
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。