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

【问题标题】：How can I Filtering API data(response) in ReactJS?如何在 ReactJS 中过滤 API 数据（响应）？
【发布时间】：2018-05-06 16:01:24
【问题描述】：

我正在开发 Reactjs 应用程序，我正在获取使用 axios 呈现列表项的请求，数据采用 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>);
}

图片会让你清晰

【问题讨论】：

因此，当您单击要过滤内存客户端中的数据的类型时
是的@Zinc，这个json数据来自API，我想根据类型（退款、调整和购买）过滤列表项

标签： javascript reactjs filter

【解决方案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"
    }
  ]
}

【讨论】：

所以我必须首先将我的 API 数据存储在常量中，对吗@ajay？
是的，你必须把它存储在某个地方
嘿@Ajay，如何过滤onClick，例如我点击了购买类型，点击后我必须只显示购买类型？
您必须将初始数据存储在某处，因此您还可以进行运行时计算以获取此数据。
您可以在您的onClick 方法中编写groupBy 代码

【解决方案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>
            );
        });

在此过程中，我们可以通过此示例密钥获得所需的内容。但是您可以使用这个想法来解决复杂的问题，因为我们必须在起点找到解决方案，如何让问题不再大

【讨论】：