我有一个奇怪的错误。我有一个FlatList，它从mapStateToProps渲染项目，该项目返回由Firebase提取导致的类。在那个_.map(state.classes...中，我有条件地返回了该类，但是如果我不返回其他内容，我会从平面列表中得到一个错误，该错误是抱怨缺少道具，但是如果我返回了一个空对象，那么我不会得到任何错误并且渲染是预期的。问题是我想知道这是否是正常行为。我需要退货吗？如果我根本不返回该对象，为什么会抱怨缺少道具？预先感谢，弗拉德！
import React, { Component } from "react";
import {
Text,
View,
FlatList,
NativeModules,
LayoutAnimation,
Alert,
Modal,
TouchableHighlight
} from "react-native";
import _ from 'lodash';
import { Icon, Container } from 'native-base';;
import { CardSection, Confirm } from '../../common/index'
import { connect } from 'react-redux';
import { fetchClasses, fetchStudents } from '../../../actions/index';
import { List, ListItem, Header } from "react-native-elements"
import Icon1 from 'react-native-vector-icons/FontAwesome';
const { UIManager } = NativeModules
UIManager.setLayoutAnimationEnabledExperimental
&& UIManager.setLayoutAnimationEnabledExperimental(true)
class Home extends Component {
constructor() {
super();
this.state = {
selectedUid: null,
isModalVisible1: false,
currentClass: {},
currentStudent: {},
months: ['Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie']
}
}
componentWillMount() {
this.props.fetchClasses();
this.props.fetchStudents();
}
componentDidUpdate() {
LayoutAnimation.spring();
}
static navigationOptions = {
header: null
}
render() {
return (
<Container style={{ marginBottom: 5 }}>
<Header
backgroundColor={'#1E6EC7'}
placement="left"
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'Programul Zilei', style: { color: '#fff', fontWeight: 'bold', fontSize: 22 } }}
rightComponent={<Icon name="ios-add" style={{ color: 'white' }} onPress={() => this.props.navigation.navigate('AddClass', this.props.students)} />}
/>
<List>
<FlatList
data={this.props.classes}
keyExtractor={(item, index) => `${index}`}
extraData={this.state}
renderItem={({ item }) => {
let wantedEmployee = null
if (this.props.students !== []) {
this.props.students.forEach(student => {
if (student.uid === item.studentUid)
wantedEmployee = student;
});
if (wantedEmployee !== null)
return <View><ListItem
leftIcon={<Icon1 name="times" size={24} style={{ paddingRight: 10, color: 'red' }} onPress={() => {
this.setState({ currentStudent: wantedEmployee })
this.setState({ currentClass: item })
this.setState({ isModalVisible1: true })
}} />}
onPress={() => {
if (this.state.selectedUid !== item.uid)
this.setState({ selectedUid: item.uid })
else
this.setState({ selectedUid: null })
}}
title={`${item.hour}:${item.minutes}: ${wantedEmployee.nume}`}
subtitle={item.year}
rightIcon={this.state.selectedUid === item.uid ? <Icon name="md-arrow-dropdown" /> : <Icon name="md-arrow-dropright" />}
/>
{this.state.selectedUid === item.uid ?
<View><CardSection><Text>Nume: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.nume}</Text></Text></CardSection>
<CardSection><Text>Numar de Telefon: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.phone}</Text></Text></CardSection>
<CardSection><Text>CNP: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.cnp}</Text></Text></CardSection>
<CardSection><Text>Numar Registru: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.registru}</Text></Text></CardSection>
<CardSection><Text>Serie: <Text style={{ fontWeight: 'bold' }}>{wantedEmployee.serie}</Text></Text></CardSection></View>
: null}
</View>
}
}
}
/>
</List>
<Confirm visible={this.state.isModalVisible1} onDecline={() => this.setState({ isModalVisible1: false })}>
Esti sigur ca vrei sa stergi sedinta de pe <Text style={{ fontWeight: 'bold' }}>{this.state.currentClass.day} {this.state.months[this.state.currentClass.month]} {this.state.currentClass.year}</Text> cu <Text style={{ fontWeight: 'bold' }}>{this.state.currentStudent.nume}</Text>?
</Confirm>
</Container>
);
}
}
const mapStateToProps = (state) => {
function compare(a, b) {
if (a.nume < b.nume)
return -1;
if (a.nume > b.nume)
return 1;
return 0;
}
function compareClasses(a, b) {
if (a.hour < b.hour)
return -1;
if (a.hour > b.hour)
return 1;
return 0;
}
const date = new Date();
const year1 = date.getFullYear();
const month1 = date.getMonth();
const day1 = date.getDate();
const classes = _.map(state.classes, (val, uid) => {
const { year, month, day, hour, minutes, studentUid } = val;
if (year === year1 && month === month1 && day1 === day)
return { year, month, day, hour, minutes, studentUid, uid };
else
return {}
});
const students = _.map(state.studentsFetch, (val, uid) => {
return { ...val, uid };
});
classes.sort(compareClasses)
students.sort(compare)
return { classes, students };
}
export default connect(mapStateToProps, { fetchClasses, fetchStudents })(Home);
答案 0 :(得分：2)
如果未从映射函数显式返回任何内容，它将返回undefined，因此结果列表可能如下所示：
[
{ year: 2018, month: 9, day: 17, hour: 16, minutes: 6, studentUid: 'ABC123', uid: 'abc456'},
undefined,
{ year: 2018, month: 9, day: 01, hour: 16, minutes: 0, studentUid: 'DEF567', uid: 'def890'},
// ...
]
稍后，您的compareClasses函数将尝试调用a.hour为a的{{1}}，导致undefined，这将引发错误： / p>
(undefined).hour因此，您可能想要删除TypeError: Cannot read property 'hour' of undefined
值，这可以通过几种方法来实现。一种方法（可能是最清晰的方法）是将您的undefined语句移至if ()（对于对象，其作用类似于.pickBy），然后将提取所需属性的代码移至随后的.filter。
.map（注意：就我个人而言，我很喜欢在使用多个函数时使用lodash的序列构造函数包装对象，因此我在这里用const classes = _(state.classes)
.pickBy((val, uid) => (
val.year === year1 &&
val.month === month1 &&
val.day === day1
))
.map((val, uid) =>
({ uid, ..._.pick(val, 'year', 'month', 'day', 'hour', 'minutes', 'studentUid')})
)
.value();
完成了此操作，但是您也可以嵌套函数_(state.classes)）。
答案 1 :(得分：1)