在 React Native 部分列表中过滤数据

Question

我正在使用 React Native 的 SectionList。 SectionList 的数据看起来像这样

data: [
    {
      title: "Asia",
      data: ["Taj Mahal", "Great Wall of China", "Petra"]
    },
    {
      title: "South America",
      data: ["Machu Picchu", "Christ the Redeemer", "Chichen Itza"]
    },
    {
      title: "Europe",
      data: ["Roman Colosseum"]
    }
  ]

我有一个文本输入，我试图用它来过滤掉 SectionList 中的内容。我尝试使用 Array.filter()，但它似乎不起作用。它 returns 我没有任何过滤的全部数据。所以，我尝试了 Array.some()。现在，即使只有一项匹配，该部分中的所有数据项也会被过滤。 Array.some() 预计会出现此行为。但我很困惑为什么 Array.filter() 在我的情况下不起作用。

我的 SectionList 看起来像这样，

<SectionList 
      sections={this.state.data.filter(sectionData => {
        sectionData = sectionData.data;
        return sectionData.filter(data => {
          return data.includes(this.state.searchTerm);
        })
      })}
      renderSectionHeader={({ section: { title } }) => ( <Text style={{ fontWeight: "bold" }}>{title}</Text> )}
      renderItem={({ item }) => ( <Text style={styles.listItem}>{item}</Text>)}
      keyExtractor={item => item}
    />

这里是 Expo Playground 的 link，如果你想在线玩的话。

Answer 1

filter 将创建一个新数组，其中包含所有 return 为真值的条目。您的第二个过滤器将始终 return 至少一个空数组，这是真实的，因此您在最终结果中得到所有部分。

您可以尝试组合使用 reduce 和 filter：

this.state.data.reduce((result, sectionData) => {
  const { title, data } = sectionData;
  const filteredData = data.filter(
    element => element.includes(this.state.searchTerm)
  );

  if (filteredData.length !== 0) {
    result.push({
      title,
      data: filteredData
    });
  }

  return result;
}, [])

在 React Native 部分列表中过滤数据

Filter data in React Native Section List

javascript

reactjs

react-native

react-native-sectionlist