reactjs - 如何在 map 函数中正确返回

Question

我有一个奇怪的错误。我有一个 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);

Answer 1

看来您正在尝试做的是从数组中过滤掉数据。一种解决方案可能是使用 filter方法而不是 map 方法，因为 map期望返回一些东西:

Produces a new array of values by mapping each value in list through a transformation function