我正在对Redux和Firebase Firestore 使用 React Native ,重新匹配。我试图从我的 Firebase 数据库中提取数据,并将其填充到我的 flatList 中。问题是,它没有给我任何错误,并且给了我空白的白色屏幕。我不知道我要去哪里错了。
这就是我的数据库的样子-activities
的列表
这是我对Redux 商店的重赛:
import firebase from 'firebase';
import db from '../config/firebase'
const activity = {
state: {},reducers: {
activities(state,payload) {
return {
...state,...payload
}
},},effects: {
async getactivities() {
try {
const response = await db.collection('activities').get()
//console.log(response.docs.map(doc => doc.data()))
return dispatch({ type: 'activity/activities',payload: response.docs.map(doc => doc.data()) })
} catch (err) {
alert(err)
}
},}
}
export default activity
这是我使用 flatList 的组件:
import * as React from 'react';
import {
Text,TouchableOpacity,View,flatList,ImageBackground
}
from 'react-native';
import styles from '../styles'
import { connect } from 'react-redux';
import '@expo/vector-icons';
import 'redux';
class activities extends React.Component {
state = {
movetoArray: [],outputactivity: [],};
async componentDidmount() {
const activities = await this.props.getactivities()
this.state.movetoArray = Object.values(activities)
this.state.outputactivity = Object.entries(this.state.movetoArray[1]).map(item => ({ ...item[1],key: item[0] }));
//this.state.arrayactivity = Object.entries(activities).map(item => ({...item[1],key: item[0]}));
console.log(this.state.outputactivity)
}
_renderItem = ({ item }) => (
<TouchableOpacity
onPress={() => this.props.navigation.navigate('activitiesMD',{
title: item.name,objectData: item.data
})}>
<ImageBackground source={item.image} style={styles.inputTiles} imageStyle={{ borderRadius: 10 }}>
<View style={styles.inputTileTextView}>
<Text style={[styles.inputTileText,{ color: item.colour }]}>{item.name}</Text>
</View>
</ImageBackground>
</TouchableOpacity>
);
render() {
const { routeName } = this.props.navigation.state
return (
<View style={styles.container}>
<flatList
data={this.state.outputactivity}
keyExtractor={item => item.id}
renderItem={this._renderItem}
/>
</View>
);
}
}
const mapState = (state) => ({
activity: state.activity,})
const mapDispatch = (dispatch) => ({
getactivities: () => dispatch.activity.getactivities(),})
export default connect(mapState,mapDispatch)(activities)
我不知道为什么我得到了这个结果。请帮助我:)