我如何正确返回地图功能

Question

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

Answer 1

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

通过转换函数映射列表中的每个值，生成一个新的值数组

Answer 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 是undefined，导致(undefined).hour，这将引发错误：

TypeError: Cannot read property 'hour' of undefined

所以您可能想要删除undefined 值，这可以通过几种方式完成。一种可能是最清楚的方法是将您的if () 语句移动到.pickBy（其工作方式类似于对象的.filter），然后将提取您想要的属性的代码移动到后续的.map。

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();

(注意：就我个人而言，当我使用多个函数时，我很喜欢使用 lodash 的序列构造函数来包装对象，所以我在这里使用_(state.classes) 完成了这一点，但你也可以嵌套函数， _.map(_.pickBy(state.classes, (val, key)=>...), (val, key) => ...))。