繁体   English   中英

React Native Flatlist类别过滤器

React Native Flatlist Category Filter

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

以下代码在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 个回复

要重新渲染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

1 在 FlatList 上使用 React Native 搜索过滤器

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

2 基于类别的 React Native 更新平面列表

我正在创建一个本机应用程序,我想根据类别更新平面列表,所以首先,我想呈现所有项目,当我单击特定类别更新时,这里的平面列表是我的代码 这是带有类别组件的 flatlist 组件 ...

4 无法在平面列表中搜索过滤器(本机)

我创建了一个android应用,在其中我提取了api()并渲染了列表。 这是图像。 ( https://imgur.com/a/jH86ZL5 )。 但是,当我在单位列表中搜索标题时,会向我显示空白单位列表( https://imgur.com/a/Ss7TlnT )以下是我如何搜索代码 ...

5 React Native Hooks 搜索过滤器 FlatList

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

6 React Native Flatlist选择过滤器不刷新

在这里反应本地新手。 我有一个实验程序,通过Flatlist显示值,并在顶部显示Select标头。 当我尝试从下拉列表中选择值时,Flatlist不会在当前加载时显示当前数组数据。 任何想法为什么它不加载? 我感谢任何想法,但我坚持了几天。 我想我需要一些帮助。 谢谢! ...

7 反应原生。 过滤 FlatList - 错误“index=10 count 0”

我的任务是过滤一些数组并将其设置为 FlatList。 我的过滤功能是: 过滤后,我将 state.invoiceList 提供给 FlatList 并且一切正常。 但是,当我设置数组中不存在的一些符号时,例如“!”,该函数会清除数组,但它仍然可以正常运行。 当我删除符号“!”时,我得到一个错 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM