#javascript #react-native #react-native-flatlist
#javascript #реагировать -родной #react-native-flatlist
Вопрос:
Я знаю, что 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 не отображается повторно.
Комментарии:
1. Вы могли бы попытаться реализовать функцию обновления для обновления, если это соответствует вашим потребностям.
Ответ №1:
Сделайте что-то вроде
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);
});
}
Ответ №2:
Если вы хотите использовать функцию обновления для обновления, попробуйте что-то вроде этого:
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 }) => ( ...
Ответ №3:
Не используйте 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}
/>
);
}
Ответ №4:
deletePost = (index) => {
let data = this.state.data;
data.splice(index, 1);
this.setState({ data: [] }, () => {
this.setState({ data: data });
});
};
Спасибо всем. С вашими решениями я пришел к этой идее, и она отлично работает.