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中過濾