javascript - 数组中按字段列出的项目长度

Question

如何从数组中获取包含特定值的对象的数量？

使用 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>

您能否帮助我了解我做错了什么，或者是否有更好的方法？

Answer 1

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