在 React Native Section List 中过滤数据

Posted 2023-02-16

【中文标题】在 React Native Section List 中过滤数据

【英文标题】：Filter data in React Native Section List

【发布时间】：2018-12-17 02:50:40

【问题描述】：

我正在使用 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()，但它似乎不起作用。它不经过任何过滤就返回给我整个数据。所以，我尝试了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 的链接，如果你想在线玩的话。

【参考方案1】：

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

您可以尝试结合使用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;
, [])

【讨论】：

非常感谢。使用减速器实际上解决了我的问题。