React Native Axios通过数组的密钥进行过滤

Question

我有一个像这样的对象数组：

"data": [
{
"id": 14,
"banner_type_id": 1,
"name": "banner2022",
},
{
"id": 12,
"banner_type_id": 1,
"name": "banner845",
},
{
"id": 8,
"banner_type_id": 4,
"name": "banner_powertools"
},
]

这些代码：

useEffect(() => {
getData();
}, []);
const getData = () => {
Axios.get(baseUrl)
.then(res => {
console.log('theres: ', res.data.data);
setBanner(res.data.data);
})
}

此结果成功获取所有数据。但是，我只想显示只有banner_type_id==4的数据。我该怎么办？

Answer 1

如果您只想用banner_type_id === 4显示元素，请尝试使用array.filter()。

例如，您可以创建一个单独的函数，如const filtered = banner.filter((x) => x.banner_type_id === 4)。然后在您的return语句中，您可以像{filtered.map(x => {return <h1>{x.banner_type_id}</h1>})那样映射到该函数上。你可以检查我创建的这个代码沙盒。

Answer 2

您可以使用JavaScript的"find"方法来获取具有特定id的数据。

const getData = () => {
Axios.get(baseUrl)
.then(res => {
console.log('theres: ', res.data.data);
const banner = res.data.data.find(d => d.banner_type_id === 4)
if (banner) {
setBanner(banner.name);
}
})
}