我在 React Hooks 中使用过滤器时遇到问题，我该如何解决这个问题？答案

【问题标题】：I am having problem while using filter in react Hooks,how can i solve this issue?我在 React Hooks 中使用过滤器时遇到问题，我该如何解决这个问题？
【发布时间】：2020-07-04 14:15:36
【问题描述】：

我尝试在 react Hooks 中使用过滤器来过滤从 API 获取的状态数据，但我得到一个空数组作为输出。我该如何解决这个问题？以下是我的代码：

let FinalData = Data.filter((item) => item.district).map((item) => item.district);
let Testdata = District.filter((item) => item.title_ne === FinalData).map((item) => 
item.centroid.coordinates);
console.log("finaldata>>>", FinalData);
console.log("Districts>>>", District);
console.log("data>>>", Data);
console.log("Finally>>>", Testdata);

在每个 console.log 我得到状态值，但在'console.log("Finally>>>", Testdata);'我得到的输出为空数组。我该如何解决这个问题？

以下是我的输出：

【问题讨论】：

let FinalData = Data.filter((item) => item.district).map((item) => item.district); 返回一个数组。所以，District.filter((item) => item.title_ne === FinalData) 将是一个空数组。
正如@HarshaVenkatram 所说，FinalData 是一个数组。你可能想做let Testdata = District.filter((item) => FinalData.some((district_name) => district_name === item.title_ne).map((item) => item.centroid.coordinates); ？

标签： javascript arrays reactjs rxjs frontend

【解决方案1】：

您需要在 FinalData 数据中找到具有相同标题的标题项，您可以这样做：

let FinalData = Data.filter((item) => item.district).map((item) => item.district);
let Testdata = District.reduce((all,item) => FinalData.some(title=>item.title_ne===title)?[...all,item.centroid.coordinates]:all,[]);
console.log("finaldata>>>", FinalData);
console.log("Districts>>>", District);
console.log("data>>>", Data);
console.log("Finally>>>", Testdata);

使用数组reduce 方法代替filter 和map 链

【讨论】：