reactjs - 组件不会从 mapStateToProps 渲染

Question

我正在使用事件日历包https://www.npmjs.com/package/react-native-events-calendar，我正在尝试显示EventsCalendar来自redux.

events={fetchEvents[selected].dots}是一个数组，但组件不会呈现，但是如果我将数组直接复制到它呈现的组件中。

任何想法为什么我的组件不会呈现？

import React, { Component } from "react";
import { connect } from "react-redux";
import {
    Text,
    View,
    StyleSheet,
    Image,
    Dimensions,
    ActivityIndicator
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import * as helpers from "../../helpers";
import {
    fetchEvents,
    changeMonth,
    eventsForAgendaMonth
} from "../../actions/events";
import CustomHeader from "../../navigation/CustomHeader";
import XDate from "xdate";
import AgendaItem from "./AgendaItem";
import AgendaDay from "./AgendaDay";
import EventCalendar from "./DayView";
import propTypes from "prop-types";
class AgendaScreen extends Component {
    static navigationOptions = {
        title: "",
        header: <CustomHeader />
    };

    constructor(props) {
        super(props);

        this._eventTapped = this._eventTapped.bind(this);
        this.dateChanged = this.dateChanged.bind(this);
        this.renderEvent = this.renderEvent.bind(this);
    }

    dateChanged(date) {
        const { eventsForYear, eventsMonth } = this.props;

        this.setState({ selectedDay: date });

        this.props.dispatch(eventsForAgendaMonth(eventsForYear, date));
    }

    _eventTapped(event) {
        alert(JSON.stringify(event));
    }
    loadItems(day) {
        const { eventsForYear } = this.props;
        this.props.dispatch(eventsForAgendaMonth(eventsForYear, day));
    }

    renderEvent(event) {
        console.log("event", event);

        return <AgendaItem {...event} />;
    }

    render() {
        const {
            fetchEvents,

            navigation: {
                state: {
                    params: {
                        day: { dateString: selected }
                    }
                }
            }
        } = this.props;
        const currentDate = helpers.currentDate;
        let { width } = Dimensions.get("window");
        return (
            <View style={{ flex: 1 }}>
                <EventCalendar
                    eventTapped={this._eventTapped.bind(this)}
                    events={fetchEvents[selected].dots}
                    width={width}
                    initDate={selected}
                />
            </View>
        );
    }
}

const mapStateToProps = state => {
    return {
        fetchEvents: state.fetchEvents
    };
};

export default connect(mapStateToProps)(AgendaScreen);

AgendaScreen.propTypes = {
    eventsMonth: propTypes.object,
    eventsForYear: propTypes.object
};

const styles = {
    container: {
        backgroundColor: "#00000000"
    },
    event: {
        backgroundColor: "#00000000",
        borderColor: "#DDE5FD",
        borderWidth: 0,
        borderRadius: 0,
        paddingTop: 3,
        paddingBottom: 2
    },
    header: {
        height: 30,
        paddingHorizontal: 30
    },
    headerText: {}
};

AFAIK我没有改变状态，我正在用我的reducer创建一个新对象：

case "EVENTS_SUCCESS":
        const events = {};

        const filteredEvents = action.data
            .filter(event => {
                if (
                    event.status === "cancelled" ||
                    !event.start.dateTime ||
                    helpers.checkDate(event.start.dateTime)
                ) {
                    return false;
                }

                return true;
            })
            .sort((a, b) => a.startTimeString - b.startTimeString);

        filteredEvents.map(event => {
            const {
                start: { dateTime: startTime },
                end: { dateTime: endTime },
                summary,
                id
            } = event;

            const sDate = new Date(startTime);
            const eDate = new Date(endTime);

            const startHour = sDate.getHours();
            const startMinute = sDate.getMinutes();

            const startDate =
                sDate.getFullYear() +
                "-" +
                ("0" + (sDate.getMonth() + 1)).slice(-2) +
                "-" +
                ("0" + sDate.getDate()).slice(-2);

            const endHour = eDate.getHours();
            const endMinute = eDate.getMinutes();
            const endDay = eDate.getDay();
            const endMonth = eDate.getMonth();
            const endYear = eDate.getFullYear();

            const eventStartTime = `${startHour}-${startMinute}`;
            const eventEndTime = `${endHour}-${endMinute}`;

            let newEvent = {
                title: summary,
                summary,
                id,
                eventStartTime,
                eventEndTime
            };

            events[startDate] = events[startDate] || { dots: [] };

            const dotsEvents = [...events[startDate].dots, newEvent];

            dotsEvents.sort(
                (a, b) => a.startTimeString - b.startTimeString
            );

            events[startDate] = {
                dots: dotsEvents,
                disabled: false,
                selected: true,
                selectedColor: "#00CCCB",
                customStyles: {
                    text: {
                        marginTop: 3
                    }
                }
            };
        });

        return {
            ...events
        };

标签： reactjsredux