React 原生子组件没有从父母 state 获得 componentWillReceiveProps

Question

I'm trying to implement timer that counts the next event from the JSON API. Unfortunately the API does not support filter so I have to process it on the component

here's the code:

constructor(props) {
    super(props);

    this.scrollViewRef = React.createRef();

    this.state = {
        agendaVisible: false,
        scrollOffset: null,
        markedDates: {},
        dateString: Date(),
        agendaItems: {},
        nextEvent: {
            start: 99999999999,
            name: "",
        },
        isProcessing: true,
    };

    this.closeModal = this.closeModal.bind(this);
    this.openModal = this.openModal.bind(this);
}

setMarkedDates = () => {
    const { events } = this.props;

    if (events !== undefined) {
        Object.keys(events).map((key) => {
            let now = Date.now();
            let difference = events[key].start * 1000 - now;
            let a = new Date(events[key].start * 1000);
            let date = `${a.getUTCFullYear()}-${this.str_pad(
                a.getUTCMonth() + 1
            )}-${this.str_pad(a.getUTCDate())}`;

            if (difference > 0 && difference < this.state.nextEvent.start) {
                this.setState({
                    nextEvent: {
                        start: events[key].start * 1000,
                        name: events[key].name,
                    },
                });

                console.log("Goes in here: " + events[key].start);
            }
            }
            // Set Marked dates on calendar and agenda Items
            this.setState(({ markedDates, agendaItems }) => ({
                markedDates: {
                    ...markedDates,
                    [date]: {
                        marked: true,
                        selectedColor: "blue",
                        activeOpacity: 0,
                        dotColor: "blue",
                    },
                },
                agendaItems: {
                    ...agendaItems,
                    [date]: [
                        {
                            name: events[key].name,
                            height: 100,
                        },
                    ],
                },
            }));
        });

        this.setState({ isFetching: false });
    }
};

Then I passed in the nextEvent to my EventTimer component in the render

            {!this.state.isFetching && (
                <EventTimer
                    nextEvent={this.state.nextEvent}
                    nextEventStart={this.state.nextEventStart}
                />
            )}

Now the problem is, whenever I called {this.props.nextEvent.start} in the render, it works, however I need to set it up the state of eventTimer for static endTime to calculate the difference every interval, I put the code on componentWillReceiveProps but I never get the updated props? it still stays at 9999999999, what happened?

If it doesn't receive the props then which part of the lifecycle received the props? Because it works when I tried to render it. I'm not sure where should I update the state from the props anymore.

Please help, Thanks!

componentWillReceiveProps(nextProps) {
    this.setState({
        endTime: Date.now() + this.props.nextEvent.start,
    });

    this.resetTimer();
}

resetTimer = () => {
    if (this.interval) clearInterval(this.interval);
    this.interval = setInterval(
        this.setTimeRemaining,
        this.timeRemaining % 1000
    );
};

Answer 1

You are referring to the initial props in the componentWillReciveProps .

this.setState({
    // this.props refers to the current props. 
    // endTime: Date.now() + this.props.nextEvent.start,

    endTime: Date.now() + nextProps.nextEvent.start,
});

While that should fix the bug you are facing. You should try to not use this lifecycle method and instead depend on a calculated value from the parent component.

The componentWillReciveProps will be deprecated in the next major version. You can read a bit more about this in the react docs.