firebase - 来自Flatlist中Firebase Firestore的数据在React Native中不会呈现
问题描述
我来自 firebase firestore 的数据不会在 react native Flatlist 中呈现。有谁知道为什么?它应该在列表中呈现 3 个任务,但是当我运行我的应用程序时它完全是空白的。
const [list, setList] = useState([])
useEffect(() => {
firebase.firestore().collection('users').doc(uid).collection('tasks').get((snapshot) => {
var data = snapshot.docs;
data.forEach((doc) => {
setList({
key: doc.id,
task : doc.data().task,
})
})
})
});
return (
<View style={styles.container}>
<Text style={styles.title}>Here is your tasks for today</Text>
<FlatList style={{width: '100%'}}
data={list}
keyExtractor={(item) => item.key}
renderItem={({item}) => {
return(
<View>
<Text>{item.task}</Text>
</View>
)
}}
/>
解决方案
flatlist 数据需要是一个数组
这使列表成为一个不会渲染的对象
setList({
key: doc.id,
task : doc.data().task,
})
我想这会奏效
firebase.firestore().collection('users').doc(uid).collection('tasks').get((snapshot) => {
var data = snapshot.docs;
let FirebaseArray = []
data.forEach((doc) => {
FirebaseArray.push({
key: doc.id,
task : doc.data().task,
})
})
setList(FirebaseArray)
})
推荐阅读
- mongodb - 从 mongodb 中的多个集合创建视图?
- php - 检查表是否存在于PHP中
- ios - 创建具有固定大小和自定义图标的 UIBarButtonItem
- python - 为什么 python 在使用 ctypes 加载 dll 时会引发错误 OSError?
- jira - JIRA 在上个月的报告中花费了时间
- angular - 基于 ResponseHeaders 解析响应
- ios - Swift ios如何设置导航栏图像不拉伸
- html - 为什么 height 100% 不能将 div 完全扩展到页面底部?
- jwt - 无法为 Apollo 客户端设置身份验证标头
- java - 查询DSL 4.1.4,Jpa GROUP BY Date