React 本机子组件没有从父状态获取 componentWillReceiveProps

Question

我正在尝试实现对来自 JSON API 的下一个事件进行计数的计时器。不幸的是，API 不支持过滤器，所以我必须在组件上处理它

代码如下：

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

然后我在渲染中将 nextEvent 传递给我的 EventTimer 组件

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

现在的问题是，每当我在渲染中调用 {this.props.nextEvent.start} 时，它都可以工作，但是我需要将其设置为静态 endTime 的 eventTimer 状态以计算每个间隔的差异，我将代码放在 componentWillReceiveProps 但我从来没有得到更新的道具？它仍然停留在 9999999999，发生了什么？

如果它没有收到道具，那么生命周期的哪一部分收到了道具？因为当我尝试渲染它时它可以工作。我不确定我应该在哪里更新道具的状态。

请帮忙，谢谢！

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

您指的是componentWillReciveProps中的初始道具。

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

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

虽然这应该可以解决您面临的错误。您应该尽量不使用这种生命周期方法，而是依赖于父组件的计算值。

componentWillReciveProps 将在下一个主要版本中被弃用。您可以在react docs.

中阅读更多相关信息