以下代码在FlatList中显示来自API的帖子列表。 FlatList可以工作并显示我的所有帖子,但是我试图通过使用filterCrime状态的Picker根据类别过滤帖子。

这是我当前的文章,其中显示帖子,并具有正确设置filterCrime状态的选择器。

constructor(props) {
    super(props);

    this.state = {
      loading: true,
      data: [],
      page: 1,
      refreshing: false,
      filterCrime: ''
    };
  }

fetchData = () => {
    const { page } = this.state;
    const url = 'MyAPI';
    this.setState({ loading: true });
    fetch(url)
      .then(res => { 
        return res.json()
      })
      .then(res => {
        const arrayData = [...this.state.data, ...res]
        this.setState({
          data: page === 1 ? res : arrayData,
          loading: false
        });
      })
  };

   updateFilter = (filterCrime) => {
      this.setState({ filterCrime: filterCrime })
   }

componentDidMount() {

      this.fetchData();
  }

   handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1
      },
      () => {
        this.fetchData();
      }
    );
  }; 

  render() {
    return (
  <Container>

<Picker selectedValue = {this.state.filterCrime} onValueChange = {this.updateFilter}>

               <Picker.Item label = "Disorder" value = "24" />
               <Picker.Item label = "Assault" value = "23" />
               <Picker.Item label = "Theft" value = "21" />
</Picker>

//This properly shows category slug that was selected from Picker //
<Text>{this.state.filterCrime}</Text>

     <FlatList
        data={this.state.data}
        keyExtractor={item => item.id} 
        renderItem={({ item }) =>{      
          return (
<Tile>
  <View>
    <Title>{item.title}</Title>
    <View>
//This displays the posts category//
      <Caption>{item.categories[0]}</Caption>
    </View>
  </View>
</Tile>
          )
        }}  
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={0}
      />

</Container>
    );
  }

这是我尝试的代码,尝试基于filterCrime值过滤Flatlist,但是什么也没发生,无论类别如何,它仍然会加载所有帖子。

<FlatList
        data={this.state.data}
        keyExtractor={item => item.id} 
        renderItem={({ item }) =>{

          //My Attempt trying to filter posts that does not work// 
          if ( !this.state.filterCrime || item.categories[0] == this.state.filterCrime ) {      

          return (
<Tile>
  <View>
    <Title>{item.title}</Title>
    <View>
//This displays the posts category//
      <Caption>{item.categories[0]}</Caption>
    </View>
  </View>
</Tile>
          )
        }}} 
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={0}
      />

如果我手动将filterCrime状态设置为filterCrime:'23'并重新加载应用,则新闻Feed会正确过滤,并且只会显示类别标签为23的帖子,因此我的API可以正常工作,而且唯一可能的问题是使用Picker更改上的清单。

#1楼 票数:0

要重新渲染Flatlist ,您将需要为其设置extraData道具。

https://facebook.github.io/react-native/docs/flatlist.html

通过将extraData = {selected}传递给FlatList,我们确保状态改变时FlatList本身将重新呈现。 如果不设置此道具,FlatList将不知道它需要重新渲染任何项目,因为它是PureComponent,并且道具比较不会显示任何更改。

所以对于您的情况将this.state.filterCrime设置为它

<Flatlist
    extraData={this.state.filterCrime}
    ....
/>

或者,您可以过滤您this.state.data的,而不是过滤器的renderItem

  ask by Brayden translate from so

未解决问题?本站智能推荐:

1回复

React-native:维护多个过滤器按钮/多个过滤器的状态

我一直在尝试实现过滤数据的功能。 这是带有样板示例的Sandbox 链接。 这就是我正在努力实现的目标。 允许多选。 我不太确定如何处理这个实现。 由于我们维护多个按钮状态,我正在考虑维护某种数组或字典,其中包含标签名称及其当前状态(已选择或未选择)的详细信息但我不确定如何跟踪每个切换状态,哪个项
4回复

ReactNativeHooks搜索过滤器FlatList

我正在尝试制作 Covid19 React Native Expo 应用程序。 它包含一个搜索过滤器,用户可以从中选择一个国家,然后将向用户显示所选国家的结果。 我在我的 Android 设备上不断收到此错误“Unexpected Identifier You”,而在 web pack 上加载了国家
11回复

在FlatList上使用ReactNative搜索过滤器

我正在尝试根据搜索栏文本搜索平面列表。 我遇到的问题是,当用户输入错误时……说他们想输入“burger”但错误地输入了“burget”,那么它应该没有返回任何内容。 当用户删除“t”时,它应该使用与“burge”部分匹配的最后一个文本再次重新呈现平面列表。 注意:使用 react-native-el
1回复

ReactNative:带有ExtraData的FlatList过滤器不会刷新

我有一个Flatlist,它的工作方式类似于待办事项列表,带有用于“待办事项”和“即将到来”的过滤器。 当用户滑动完成项目时,通过更改displayIndex属性将其从列表中隐藏。 我希望在刷卡后或用户选择“即将到来”之前重新加载列表。 阅读完其他堆栈溢出的答案后,我尝试将FlatData
2回复

无法让过滤器方法适用于我的flatList

我一直在尝试过滤掉用户输入的项目名称并告诉他们该项目已找到,如果该项目不存在,那么用户也应该收到警报,但我不知道出于某种原因我的过滤器方法似乎不起作用。 这是我现在拥有的 flatList。 这是我在列表中搜索项目的代码。 NameInput 是用户输入,设置为用户输入的内容。 稍后单击按钮时,应
1回复

搜索过滤器未正确呈现FlatList

我的 flatList 显示了 2 个项目,如果我搜索文本,它会显示该项目。 但是现在当我开始单击退格键并删除我的搜索文本时,我的其他项目没有显示,而是仍然在上一个项目上。 我的代码如下: 搜索过滤器可以工作,但是一旦我开始清除搜索文本,我的平面列表就应该重新呈现到其初始状态。 请检查我的代码,让我
1回复

React-Native如何使用过滤器修改数组中的对象?

我使用useState进行了上述安排。 我创建了一个将{value: "", key: ""}到items数组的函数。 我想title的arr0根据改变items.key 。 我使用了filter思维key == 0但是没有用。 如果您有好的意见,请给我一些建议。 非常感谢您的宝贵时间。
2回复

React-Native可见性过滤器不起作用?

我目前正在尝试使用react-native和redux创建一个“ TodoApp”。 我可以在其中添加和切换工作的不同部分,但似乎无法正确设置可见性过滤器(显示全部/完成/活动)。 这是TaskListContainer的相关代码: 如果初始状态为“ SHOW_ALL”,则该应用程序正