如何从React Native FlatList中的异步函数返回值

Question

**我正试图过滤掉被屏蔽用户的帖子。**

我做了一个异步函数来检查用户是否被阻止：

checkBlocked = async userId => {
try {
let snapshot = await firebase.database().ref('Blocked/' + firebase.auth().currentUser.uid).orderByChild('uid').equalTo(userId).once('value')
return snapshot.exists();
}
catch(error) {
return false;
}
}

我想返回flatlist内部的值，以便相应地显示帖子：-

<FlatList
inverted
extraData={this.state.blocked}
data={this.state.arrData}
keyExtractor={item => item.key}
renderItem={({ item }) => {


this.checkBlocked(item.id).then(val => this.setState({blocked: val}));

if(this.state.blocked == true){
return (
//something
)
}
else {

return (
//something
)
}
}}

以上方法不起作用，我哪里出了问题

Answer 1

我们没有所有的细节，但我可以看到这里的逻辑流程很奇怪。让我们看看发生了什么

1. FlatList使用this.state.arrData渲染
2. 在renderItem的每次迭代中，checkBlocked使用用户的id进行异步调用
3. 基于this.state.blocked渲染某些内容
4. 您的checkBlocked承诺解析，并且状态中的blocked变量被返回的值覆盖

您正在做出一个承诺(checkBlocked(id).then()(，但您的render不会等到该承诺得到解决后才返回某些内容。所以你的this.state.blocked还没有被定义为你在报税表中的想法同样，setState是异步的，这意味着您不能依赖于return语句中的值作为刚刚从checkBlocked设置的值。

更好的模式是，在渲染组件之前，通过异步循环运行用户列表，其中每个条目都用checkBlocked进行检查。然后可以构造一个对象数组，比如usersWithBlockedStatus，每个对象都有一个用户名和阻止状态。然后过滤掉所有blocked状态为true的条目，并将其称为usersThatAreNotBlocked。只有当所有这些都完成后，才能使用数据将FlatList渲染为usersThatAreNotBlocked。

您可以在以下问题中找到另一个写得很好的解释：如何在FlatList上的renderItem中调用fetch((？