Итак, я пытаюсь визуализировать мою базу данных Firebase на моем симуляторе Android, и она показывает ошибку, в которой решение заключается в преобразовании объекта в массив, но я не знаю, как это сделать.
import _ from 'lodash';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {FlatList, View, Text} from 'react-native';
import {employeesFetch} from '../actions';
import ListItem from './ListItem';
class EmployeeList extends Component {
componentDidMount(){
this.props.employeesFetch();
}
renderRow(employee) {
return <ListItem employee={employee}/>;
};
render(){
console.log(this.props.employees);
return (
<View>
<FlatList
data={Object.keys(this.props.employees)}
renderItem={this.renderRow}
/>
</View>
);
}
}
const mapStateToProps = state => {
const employees = _.map(state.employees, (val, uid) => {
return { ...val, uid };
});
return { employees };
};
export default connect(mapStateToProps, { employeesFetch })(EmployeeList);
Этот помощник mapStateToProps должен создать переменную с именем employee (если я не ошибаюсь, я просто учусь кодировать), но когда я записываю это так:
<FlatList
data=employees
renderItem={this.renderRow}
/>
Это говорит о том, что сотрудники не определены. На всякий случай, я добавлю файл ListItem, чтобы показать, что я там сделал.
import React, {Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';
class ListItem extends Component {
render () {
const { name } = this.props.employee;
return (
<CardSection>
<Text style={styles.titleStyle}>
{name}
</Text>
</CardSection>
);
}
}
export default ListItem;
Я ожидаю, что вывод будет список, показывающий сотрудников (записанных в базе данных Firebase) на экране, но этос ошибкой: Нарушение инварианта: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {имя, телефон, смещение, uid}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.