我有一个奇怪的错误。我有一个 FlatList，它渲染来自 mapStateToProps 的项目，它返回从 firebase 获取结果的类。在 _.map(state.classes... 中，我有条件地返回该类，但如果我不返回 else 中的某些内容，我会从平面列表中收到一个错误，该错误提示缺少 Prop ，但是如果我返回一个空对象，我不会收到任何错误，并且渲染符合预期。问题是我想知道这是否是正常行为。我需要返回一些东西吗？为什么它提示缺少 Prop 如果我根本不归还该对象？提前致谢，Vlad!
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);
最佳答案
看来您正在尝试做的是从数组中过滤掉数据。一种解决方案可能是使用 filter方法而不是 map 方法，因为 map期望返回一些东西:
Produces a new array of values by mapping each value in list through a transformation function
关于reactjs - 如何在 map 函数中正确返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52372864/