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}时，它都可以工作，但是我需要将它设置为eventTimer的静态endTime状态以计算每个间隔的差值，然后将代码放在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.

中了解更多相关信息

反应本机子组件未从父状态获取componentWillReceiveProps

1 个答案: