使用 React Native 从 Firebase 获取数据

Question

大家好，我是 ReactNative 的新手，我正在开发一个基本的经理应用程序，允许用户创建员工并查看所有员工的列表。 我正在使用 React、Redux 和 Firebase。

我知道 firebase 只是从数据库中返回 Object，因此我们需要将其转换为数组，我使用 Lodash 来执行此操作，但这并不成功。

在 Mac OS Mojave 上工作

这是我的动作创建者代码

export const employeesFetch = () =>{
const {currentUser} = firebase.auth();

return(dispatch) => {
    firebase.database().ref(`/users/${currentUser.uid}/employees`)
    .on('value', snapshot => {
        dispatch({type: EMPLOYEES_FETCH_SUCCESS, payload: snapshot.val()});
    })
 };
};

这是我的减速器

import {
EMPLOYEES_FETCH_SUCCESS
} from '../actions/type';

const INITIAL_STATE = {};

export default (state = INITIAL_STATE, action) => {
switch (action.type) {
    case EMPLOYEES_FETCH_SUCCESS:
        console.log(action);
        return action.payload;
    default:
        return state;
  }
};

这是我的 EmployeeList 组件

import _ from 'lodash';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {FlatList, View, Text, StyleSheet} from 'react-native';
import {employeesFetch} from '../actions';
import ListItem from './ListItem';

class EmployeeList extends Component {
componentWillMount() {
    this.props.employeesFetch();

}

renderItem(employee) {
    return <ListItem employee={employee} />;
 }


render(){
    return (
        <FlatList
            data = {this.props.employees}
            renderItem = {this.renderItem}
            keyExtractor= {employee => employee.uid}

            />
        )
    }
}

const mapStateToProps = state => {
  const employees = _.map(state.employees, (val, uid) => {
    return { uid };
  });

  return { employees };
};

export default connect(mapStateToProps, {employeesFetch}) 
  (EmployeeList);

这是我的 ListItem 组件：

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {CardSection} from './common';

class ListItem extends Component {


    render() {
        console.log('HERE' + this.props.employee);
        const {name} = this.props.employee;

        return(
            <CardSection>
                <Text>
                    Name : {name}
                </Text>

            </CardSection>
        );
    }
}

export default ListItem;

这是我的 Firebase shema 和我的模拟器输出

如您所见，应用程序实际上显示了两个 ListItem，因此它知道我们有两个要显示的元素但无权访问 name 属性

感谢您的帮助

Answer 1

有几个错误。第一个在你的mapDispatchToProps：

const mapStateToProps = state => {
  const employees = _.map(state.employees, (val, uid) => {
    return { uid };
  });

  return { employees };
};

在这里，您正在创建索引 [0,1,2,3...] 的映射数组，并丢弃每个员工的所有其他部分。

您需要（至少）返回您的 name 作为您的 employees 映射的一部分：

const mapStateToProps = state => {
  const employees = _.map(state.employees, (val, uid) => {
    return { uid, 
             name: val.name
    };
  });

  return { employees };
};

其次，renderItem 传递的是 item，而不是 employee。您还需要对其进行解构：

renderItem({item}) {
    return <ListItem employee={item} />;
 }