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

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

作为响应，有一个数组具有类型

，

退款

和

调整

，我必须制作一个功能，通过该功能，我可以过滤具有

类型的数组（onClick）

，我有renderd列表项，但无法根据API响应给出的

类型进行过滤，有人能帮我解决这个问题吗

此.renderTransactionSummary（txn，数据）是一个不同的函数，用于将数据从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"
            },
  ]

反应JS代码

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

render（）{
返回(

{t（'wallet.all'）}
{t（'wallet.purchase'）}
{t（'wallet.adjustment'）}
{t（'wallet.return'）}

{this.renderTxnHeader（）}

{/*列表项*/}
{transaction.map（（txn，key）=>(

{this.renderTransactionSummary（txn，数据）}

))}

);
}

图像将使您清晰

您可以使用将应用程序的数据分组，然后将数据发送到应用程序。代码应为：

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"
    }
  ]
}

我从这个第一个使用过滤器，我如何可以选择什么是需要的数据，然后使用映射方法如何可以渲染列表数据。因为在很多情况下，最好使用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>
            );
        });

const pera=[
{“id”：1，“标题”：“Prvi”}，
{“id”：2，“title”：“Drugi”}，
{“id”：3，“title”：“Treci”}，
{“id”：4，“标题”：“Cetvrti”}，
{“id”：5，“标题”：“小”}，
{“id”：6，“title”：“Sesti”}，
{“id”：7，“标题”：“Sedmi”}，
{“id”：8，“标题”：“Osmi”}，
{“id”：9，“title”：“Deveti”}，
{“id”：10，“标题”：“Desti”}
];
类Proba扩展组件{
构造函数（）{
超级（）；
这个州={
米卡：[]，
};
}
render（）{
const mika=pera.filter（id=>{
返回（id.id==2）；
});
常量mika1=mika.map（（primer，i）=>{
返回(
{primer.id}{primer.title}
);
});

在这段时间里，我们可以用这个示例键获得所需的信息。但是这个想法可以用于解决复杂的问题，因为我们必须从一开始就解决这个问题，如何使问题不成为一个大问题
所以当你点击一个类型，你想过滤你在clientsideyes@Zimen内存中的数据时，这个json数据来自API，我想过滤列表按类型分类的项目（退款、调整和购买）所以我必须首先将我的API数据存储在常量中，对吗@ajay？是的，你必须将其存储在某个地方嘿@ajay，如何过滤onClick，例如，我单击了purchase type，单击后我必须只显示purchase type？你必须将初始数据存储在某个地方，这样你也可以进行运行时计算以获得该数据。你可以在
onClick
方法中编写
groupBy
代码