React Native Flatlist 类别过滤器

Question

以下代码显示来自 FlatList 内 API 的帖子列表。 FlatList 工作并显示我所有的帖子，但我试图通过使用 filterCrime state 的选择器根据类别过滤帖子。

这是我的当前显示帖子并具有正确设置 filterCrime state 的选择器。

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 state 设置为 filterCrime: '23' 并重新加载应用程序，则新闻源会正确过滤并且只会显示类别 slug 为 23 的帖子，所以我的 API 可以工作，这是可能的，唯一的问题是使用选择器更改的平面列表。

Answer 1

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

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

通过将 extraData={selected} 传递给 FlatList，我们确保当 state 发生变化时，FlatList 本身将重新渲染。 如果不设置这个 prop，FlatList 将不知道它需要重新渲染任何项目，因为它是一个 PureComponent，并且 prop 比较不会显示任何更改。

因此，对于您的情况，将this.state.filterCrime设置为它

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

或者，您可以过滤您的this.state.data而不是在renderItem中过滤