刷新平面列表React本机

Question

我试图用refreshControl在平面列表中重新加载提要。滚动效果很好，所以如果我向下滚动，就会显示ActivityIndicator。但问题是平面主义者不会更新。有人能理解为什么或者有另一个解决方案来重新加载平面主义者吗？

这是我的重新加载功能：

return new Promise(resolve => setTimeout(resolve, timeout));
}
const onRefresh = React.useCallback(() => {
setRefreshing(true);
props.reload()
wait(2000).then(() => setRefreshing(false));
}, []);

这就是我在平面中显示它的方式

<FlatList
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
numColumns={1}
horizontal={false}
data={filteredDataSource}
extraData={filteredDataSource}
renderItem={({ item }) =>
{My Items here}
/>
}

在我的Action.js(redux(中，我有一个名为reload((的I函数

export function reload() {
return ((dispatch) => {
dispatch(clearData())
dispatch(fetchUsersData())
dispatch(fetchUser())
dispatch(fetchUserPosts())
dispatch(fetchFollowingUsersPosts())
})
}

在这里，我将我的FilteredDataSource设置为我的帖子

useEffect(() => {
let posts = [];
if (props.usersPostLoaded == props.allPosts.length) {
for (let i = 0; i < props.allPosts.length; i++) {
const user = props.users.find(el => el.uid === props.allPosts[i]);
if (user != undefined) {
posts = [...posts, ...user.posts]
}
}
posts.sort(function (x, y) {
return x.creation - y.creation
})
setPosts(posts);
setFilteredDataSource(posts);
setMasterDataSource(posts);
}
}, [props.usersPostLoaded]); 

Answer 1

您可以在flatlist中使用extradata道具，您的flatlist将随着数据的更改而刷新。

extraData={userData}

https://reactnative.dev/docs/flatlist#extradata

Answer 2

实现它的方法之一，使用useEffect来控制您的生命周期，在这种情况下控制刷新数据，您可以添加以下代码：

React.useEffect(()=>{
if (refreshing){
dispatch(clearData())
dispatch(fetchUsersData())
dispatch(fetchUser())
dispatch(fetchUserPosts()) 
dispatch(
fetchFollowingUsersPosts()
)
setRefreshing(false);
};
} , [refreshing])

同时将onRefresh更改为：

const onRefresh = React.useCallback(() => {
setRefreshing(true);
}, []);

Answer 3

您可以在平面列表中使用extraData道具。

Answer 4

根据FlatList文档，将extraData={this.state}传递给FlatList可能会导致重新渲染。

<FlatList 
extraData={this.state.index}
showsVerticalScrollIndicator={false}
removeClippedSubviews={false}
data={this.props.response}
keyExtractor={(item, index) => index}
renderItem={({item, index}) => this.renderFlatListItem (item, index)}
/>

现在像这个一样更新它

this.setState(prevState => ({index: prevState.index + 1}));