ReactJS中如何过滤API数据（响应）？

Question

我正在开发Reactjs应用程序，使用axios进行get请求以渲染列表项，数据以json格式呈现。

在响应中，有一个数组，其中包含purchase、refund和Adjustment类型。我必须通过types（onClick）制作一个功能来过滤数组，我已经呈现了列表项，但无法根据API响应提供的type进行过滤。有人可以帮助我解决这个问题吗？ this.renderTransactionSummary(txn, data)是一个不同的函数，它从API映射数据以呈现列表项。

---

JSON响应

 "transactions": [
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "refund"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "adjustment"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "purchase"
            },
  ]

ReactJS 代码

render() {
    return (<Layout t={t}>
        <div className="content">
            <div className="wrapper">
                <div className="filterWrapper">
                    <ul className="filters">
                        <li className="active"><span>{t('wallet.all')}</span></li>
                        <li><span>{t('wallet.purchase')}</span></li>
                        <li><span>{t('wallet.adjustment')}</span></li>
                        <li><span>{t('wallet.refund')}</span></li>
                    </ul>
                </div>
                <div className="summaryContainer">
                    {this.renderTxnHeader()}

                    <ul className="summaryList">
                        {/* List Items */}
                        {transaction.map((txn, key) => (
                            <li key={key} className="txnList">
                                <div className="summaryBlock">
                                    {this.renderTransactionSummary(txn, data)}
                                </div>
                            </li>
                        ))}
                    </ul>
                </div>

            </div>
            </Layout>);
}

图片会更加清晰明了

- wali

---

当您单击要筛选内存客户端中的数据的类型时。 - curv

是的@Zinc，这个JSON数据来自API，我想根据类型（退款、调整和购买）过滤列表项。 - wali

Answer 1

您可以使用 lodash 的 groupby 方法来为您的应用程序组织数据，然后将数据发送到您的应用程序中。代码如下:

const a =  {transactions: [
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "refund"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "adjustment"
            },
            {
                "amounts": 12.96,
                "balance": 0,
                "description": "",
                "occurred_at": "2017-09-23T19:18:21+00:00",
                "type": "purchase"
            },
  ]
};  

const filterByType = _.groupBy({...a.transactions}, 'type');

filterByType将包含所需的数据，如下：

{
  "refund": [
    {
      "amounts": 12.96,
      "balance": 0,
      "description": "",
      "occurred_at": "2017-09-23T19:18:21+00:00",
      "type": "refund"
    }
  ],
  "adjustment": [
    {
      "amounts": 12.96,
      "balance": 0,
      "description": "",
      "occurred_at": "2017-09-23T19:18:21+00:00",
      "type": "adjustment"
    }
  ],
  "purchase": [
    {
      "amounts": 12.96,
      "balance": 0,
      "description": "",
      "occurred_at": "2017-09-23T19:18:21+00:00",
      "type": "purchase"
    }
  ]
}

- Ajay Gaur

---

那么我首先需要将我的API数据存储在常量中，对吗@ajay？ - wali

是的，你需要把这个存储在某个地方。 - Ajay Gaur

你必须将初始数据存储在某个地方，这样你就可以进行运行时计算来获取这些数据。 - Ajay Gaur

我正在将数据存储在这个常量中 const transaction = (data && data.transactions) ? data.transactions : []; - wali

让我们在聊天中继续这个讨论。 - Ajay Gaur

Answer 2

我从这里开始使用过滤器，如何选择需要的数据并使用map方法呈现列表数据。因为在许多情况下最好使用Id字段，然后读取此行数据。

  const pera=[
    {"id": 1,"title": "Prvi"},
    {"id": 2, "title": "Drugi"},
    {"id": 3, "title": "Treci"},
    {"id": 4, "title": "Cetvrti"},
    {"id": 5, "title": "Peti"},
    {"id": 6, "title": "Sesti"},
    {"id": 7, "title": "Sedmi"},
    {"id": 8, "title": "Osmi"},
    {"id": 9, "title": "Deveti"},
    {"id": 10, "title": "Desti"}
    ];


class Proba extends Component{
    constructor(){
        super();
        this.state={
            mika:[],
        };
    }

    render(){

        const  mika = pera.filter(id=>{
            return (id.id=== 2);
        });
        const mika1 = mika.map((primer,i)=>{
            return(
              <div key={primer.id}>
                  {primer.id} {primer.title}
              </div>
            );
        });

通过这个样例密钥，我们可以得到所需的内容。但是这个想法也可以用于复杂的问题，因为我们必须从问题的起点开始找到解决方案，以避免问题变得更加严重。

- Miodrag Trajanovic