Question

我正在尝试构建一个应用程序，可以在其中添加将存储在Firebase数据库中的员工），并在应用程序的场景中显示保存的数据。该场景应该只显示对象的一个键。

我尝试自己将其更新为FlatList，但无法显示之前提到的密钥。它什么也没显示，只是记录了必须渲染的对象数量。我已经将componentWillMount更改为componentDidMount，但不确定如何在我的代码中使用它。

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

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

        this.createDataSource(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.createDataSource(nextProps);
    }

    createDataSource({ employees }) {
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(employees);
    }

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

    render() {
        return (
            <ListView
                enableEmptySections
                dataSource={this.dataSource}
                renderRow={this.renderRow}
            />
        );
    }
}

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

    return { employees };
};

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

如果需要查看，我还将添加ListItem文件。

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

class ListItem extends Component {

    render() {
        const { name } = this.props.employee;

        return (
            <CardSection>
                <Text style={styles.titleStyle}>
                    {name}
                </Text>
            </CardSection>
        );
    }
}

const styles = {
    titleStyle: {
        fontSize: 18,
        paddingLeft: 15
    }
};

export default ListItem;

我希望该场景向我显示数据库中记录的每位员工的CardSection，并且此部分应显示所创建的每个实例的NAME密钥，但它显示了错误（因为ListView不再存在。）< / p>

如何将我的代码（具有ListView，componentWillMount和componentWillReceiveProps）更新到最新版本？

0 个答案: