试图设置倒计时计时器，但在从componentdidmount传递数据时未定义

Question

这是我的代码行。我无法访问const { quests } = this.props;中的数据，我正在从redux状态中提取该数据，并且我得到了未定义的数据。我试图将我的代码放在componentDidUpdate上，我的问题从得到未定义得到解决。然而，我无法让时间滴答作响，我的页面也无法重新呈现。

componentDidUpdate() {
const { quests } = this.props || {}
let getTime;

getTime = quests.items?.items?.map(quests => {
let startTime = Date.parse(quests.createdAt)
let endTime = Date.parse(quests.expiresAt)
let timeLimit = endTime - startTime;
let timeDuration = moment.duration(timeLimit*1000, 'milliseconds');
let interval = 1000;
let today = moment().utc();

quests.timeDuration = timeDuration
setInterval(() => {
timeDuration = moment.duration(timeDuration - interval, 'milliseconds')    
quests.timeDuration = timeDuration

}, interval)
})
return getTime;
}

Answer 1

你的计时器函数正在改变道具(这很糟糕(，因为它直接改变了任务，但它没有导致状态或道具的可识别更新，所以它不会重新渲染。这样的东西可能会起作用，如果没有更多的代码可以从你的项目中输出，很难提供一个有用的例子，但也许这会给你一个想法。

state = {
quests: [],
elapsedSeconds: 0,
}
componentDidUpdate(prevProps) {
if (!prevProps.quests && this.props.quests) {
const { quests } = this.props;
let getTime = [];
quests.items?.items?.forEach((quest, index) => {
let startTime = Date.parse(quest.createdAt)
let endTime = Date.parse(quest.expiresAt)
let timeLimit = endTime - startTime;
let timeDuration = moment.duration(timeLimit*1000, 'milliseconds');
let today = moment().utc();
getTime.push(timeDuration);
})
this.setState({quests: getTime});
this.timer = setInterval(() => {
this.setState(({elapsedSeconds, quests}) => {
quests = quests.map(time => time - 1000)
return {elapsedSeconds: elapsedSeconds++, quests};
});
}, 1000);
}
}
componentWillUnmount() {
clearInterval(this.timer);
}