如何从数组中获取包含特定值的对象的数量?
使用 componentDidMount
获取 Firestore db
中存储的数据
componentDidMount() {
db.collection(`company/${this.props.userID}/campaigns`).onSnapshot(collection => {
const campaigns = collection.docs.map(doc => doc.data());
this.setState({
campaigns,
});
});
}
这会将数据装载到 this.state
中,但我想通过其 status
字段获取每个数据的计数值。下面是一个示例,我试图获取 status
= active
draft
条目的
。length
>暂停
class App extends React.Component {
constructor() {
super();
this.state = {
campaigns: [{
id: 1,
status: "draft",
},
{
id: 2,
status: "active",
},
{
id: 3,
status: "draft",
},
{
id: 4,
status: "paused",
}
]
};
}
render() {
const totalCampaigns = this.state.campaigns
const activeCampaigns = this.state.campaigns.filter(campaign => campaign.status === "active")
const draftCampaigns = this.state.campaigns.filter(campaign => campaign.status === "draft")
const pausedCampaigns = this.state.campaigns.filter(campaign => campaign.status === "paused")
return (
<div>
total {totalCampaigns.length}
Active {activeCampaigns.length}
Drafts {draftCampaigns.length}
Paused {pausedCampaigns.length}
</div>
);
}
}
ReactDOM.render( < App / > , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
您能否帮助我了解我做错了什么,或者是否有更好的方法?
最佳答案
在state.campaigns
上使用reduce
方法并返回一个对象
,其中键将是status
并且该值将是该状态出现的次数
let state = {
campaigns: [{
id: 1,
status: "draft",
},
{
id: 2,
status: "active",
},
{
id: 3,
status: "draft",
},
{
id: 4,
status: "paused",
}
]
};
let getCount = state.campaigns.reduce(function(acc, curr) {
if (!acc.hasOwnProperty(curr.status)) {
acc[curr.status] = 1
} else {
acc[curr.status] += 1
}
return acc;
}, {})
console.log(getCount)
render() {
const totalCampaigns = // here goes the the getCount
return (
<div>
Active {getCount.draft}
Drafts {getCount.active}
Paused {getCount.paused}
</div>
);
}
关于javascript - 数组中按字段列出的项目长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51571322/