javascript - React 原生子组件没有从父状态获取 componentWillReceiveProps
问题描述
我正在尝试实现从 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
);
};
解决方案
您指的是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中阅读更多有关此内容的信息。
推荐阅读
- laravel - 在 Laravel 7 的特使脚本中获取 Dotenv 值
- html - 根据设备宽度的 HR 标签对齐在 IE11 浏览器上不起作用
- java - 使用 .or 和 .link 一起查询不起作用
- excel - 我需要使用 VBA 拖动数组公式并粘贴值,但 excel 不断崩溃
- html - 在带有 CDATA 的网站上显示 XML 文件中的可点击链接
- php - Laravel 6 中此集合实例上不存在属性 [名称]
- security - 有没有办法找出哪些 Azure DevOps 功能/设置正在使用活动的个人访问令牌 (PAT)?
- azure - Azure 函数 v3。.Net Core 3.1 绑定类型“blobTrigger”未注册
- c - 有没有办法将文件指针设置回当前行的开头?
- oracle - 在 Oracle PL/SQL 中使用 OPEN...FOR 动态 SQL 结构时多次重复相同的绑定变量