Блог

Я знаю, что ExtraData используется для обновления flatlist при его изменении, но почему-то это не работает в моем случае. Я знаю, что делаю что-то не так, но мне нужен совет, чтобы разобраться в этой проблеме. Вот мой FlatList:

 <FlatList
      data={this.state.data}
      extraData={this.state.data}
      renderItem={this.renderPost}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={this.loadMorePosts}
      onEndReachedThreshold={0.5}
      ListFooterComponent={this.renderFooter}
      showsVerticalScrollIndicator={false}
      refreshControl={
        <RefreshControl
          refreshing={this.state.loading}
          onRefresh={this.loadNewerPosts}
        />
      }
    />
  

и вот мой deleteRequest, который должен удалить один элемент из this.state.data:

 deletePost = (index) => {
console.log(this.state.data.length);
let data = this.state.data;
data.splice(index, 1);
this.setState({ data: data }, () => {
  console.log(this.state.data.length);
});
  

};

Я даже пытался перевести обновление в состояние и изменять его каждый раз, когда я удаляю элемент и помещаю его в качестве дополнительных данных, но ничего не происходит. Что я делаю не так? This.state.data.length меняется, поэтому данные изменяются, но FlatList не отображается повторно.

Сделайте что-то вроде

 deletePost = (index) => {
  ....
  let data = [...this.state.data]; // here is a logic
  data.splice(index, 1);
  this.setState({ data: data }, () => {
    console.log(this.state.data.length);
  });
}
  

Если вы хотите использовать функцию обновления для обновления, попробуйте что-то вроде этого:

   refreshFlatlist = () => {
    this.setState(
      {
        refresh: true,
      },
      () => this.getDataHandler()    // whatever updates your dataArray displayed in the list
    );
    this.setState({
      refresh: false,
    });
  };
  

Теперь компонент обновления flatlist выглядит следующим образом:

    <FlatList
            refreshControl={
              <RefreshControl
                refreshing={this.state.refresh}
                onRefresh={this.refreshFlatlist}
              />
            }
            extraData={this.state.refresh}
            data={this.state.data}
            keyExtractor={(item, index) => item.id.toString()}
            renderItem={({ item }) => ( ... 
  

Не используйте splice. Попробуйте приведенный ниже фрагмент, он работает так, как ожидалось.

 deletePost = index => {
   const newData = this.state.data.filter((item, i) => i !== index);
   this.setState({
     data: newData,
   });
};

render(){
  return (
      <FlatList
        data={this.state.data}
        extraData={this.state.data}
        renderItem={this.renderItem}
      />
    );
}  

  deletePost = (index) => {
let data = this.state.data;
data.splice(index, 1);
this.setState({ data: [] }, () => {
  this.setState({ data: data });
});
  

};

Спасибо всем. С вашими решениями я пришел к этой идее, и она отлично работает.