[英]React native child component did not get componentWillReceiveProps from parents state
我正在尝试实现从 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}
时,它都可以工作,但是我需要为 static endTime 设置 eventTimer 的 state 来计算每个间隔的差异,我把代码放在componentWillReceiveProps 但我从来没有得到更新的道具? 它仍然停留在 9999999999,发生了什么?
如果它没有收到道具,那么生命周期的哪一部分收到了道具? 因为当我尝试渲染它时它可以工作。 我不确定我应该在哪里更新道具中的 state。
请帮忙,谢谢!
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
);
};
您指的是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 中阅读更多有关此内容的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.