firebase - 将 Firebase 数据渲染到 FlatList

问题描述

我正在使用React Native，Rematch for Redux 和 Firebase Firestore。我正在尝试从我的Firebase数据库中提取数据并将其填充到我的FlatList中。问题是，它没有给我任何错误，而是给了我一个空白的白屏。我不知道我哪里错了。

这就是我的数据库的样子 - 列表activities

这就是我的 Rematch for 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)

我不知道为什么我会得到这个结果。请帮我：）

标签： firebasereact-nativereduxgoogle-cloud-firestore

如果你在 React 中直接改变状态，那么组件将不会重新渲染。请this.setState({ ... })像这样使用：

- this.state.movetoArray = Object.values(activities)
- this.state.outputActivity = Object.entries(this.state.movetoArray[1]).map(item => ({ ...item[1], key: item[0] }));

+ this.setState({ movetoArray: Object.values(activities), outputActivity: Object.entries(this.state.movetoArray[1]).map(item => ({ ...item[1], key: item[0] })) })

firebase - 将 Firebase 数据渲染到 FlatList

问题描述

解决方案

推荐阅读