数组中按字段排列的项的长度

Question

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

使用 componentDidMount 获取存储在 Firestore 中的数据 db as

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 paused.

的条目 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 和 return 和 object 上使用 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>
    );
  }

Answer 2

您可以使用下面的代码

campaigns_1 = campaigns.reduce(function(acc, cur){
    if(!acc[cur.status]) { 
      acc[cur.status] = []
    }
    acc[cur.status].push(cur);
    return acc;
}, {});

现在 campaigns_1 将是

的形式

    {
       "draft": [ {
         "id": 1,
         "status": "draft"
       },
       {
          "id": 3,
          "status": "draft"
       }],

       "active": [{
           "id": 2,
           "status": "active"
       }],

       "paused": [{
           "id": 4,
           "status": "paused"
       }]
    }

现在要获取状态为草稿的元素数量，您可以使用

const = no_of_draft_campaigns = campaigns_1.draft.length;
const = no_of_active_campaigns = campaigns_1.active.length;
const = no_of_paused_campaigns = campaigns_1.paused.length;

您将拥有的一个好处是，当您想要所有具有特定状态的元素时，您可以通过

const draft_campaigns = campaigns_1.draft;
const active_campaigns = campaigns_1.active;
const paused_campaigns = campaigns_1.paused;

您可以在此处查看工作示例

数组中按字段排列的项的长度

Length of items by field in an array

javascript

reactjs