我正在开发Reactjs应用程序,使用
在响应中,有一个数组,其中包含
JSON响应
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>);
}
图片会更加清晰明了