Question

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

这是我的当前信息，它显示帖子，并具有可以正确设置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可以正常工作，并且这是唯一的问题在于选择器上的“平面清单”发生了更改。

Answer 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

中的过滤器

React Native Flatlist类别过滤器

1 个答案: