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} />;
 }

从Firebase使用React Native获取数据

1 个答案: