Javascript 在React.js中的ComponentDidUpdate中设置超时

我坚持一个我自己解决不了的问题。也就是说，我试图弄清楚在我想要改变状态的时刻如何设置超时。换句话说，我想在5秒钟后更改它，这应该发生在我更改状态的地方，即在ComponentDidUpdate生命周期中。这是可能的还是我应该重写我的代码

另外，在呈现方法中加入“if”逻辑（如下面的代码所示）是否是一种好的做法

提前谢谢你

import React，{Component}来自'React'；
导入“../sass/main.scss”；
类TypeAnimation扩展组件{
建造师（道具）{
超级（道具）；
此.state={
第0节，
sec2:0，
当前句子：0，
闪烁：“|”，
闪烁器2：空
};
}
componentDidMount（）{
this.firstSentenceInterval=setInterval（（）=>{
这是我的国家({
sec2:this.state.sec2+1，
});
}, 100);
this.textInterval=setInterval（（）=>{
这是我的国家(
prevState=>（{
sec:prevState.sec！==this.props.text[0]。长度&&
this.state.sec2===this.props.text[0]。长度？
prevState.sec+1:0，
CurrentSession:prevState.sec==this.props.text[0]。长度？
prevState.Current句子+1:prevState.Current句子，
})
); 
}, 100);
}
componentDidUpdate（）{
如果（this.state.sec2===this.props.text[0]。长度&&
this.state.blinker！==null）{
this.setState（{//）我想更改这些状态，但5秒后
闪烁：空，
眨眼者2:“|”
});
clearInterval（这是firstSentenceInterval）；
} 
}
render（）{
const incomingFirstSen=this.props.text[0]；
const first句子=incomingFirstSen.substr（0，this.state.sec2）；
让其他句子；
const nextcontents=this.props.text.slice（1）；
const currentText=nextContents[this.state.currentSession]；
if（this.state.sec2！==incomingFirstSen.length）{
其他句子=空；
}else if（this.state.currentSession！==nextContents.length）{
OtherSequences=currentText.substr（0，this.state.sec）；
}否则{
clearInterval（this.textInterval）；
其他句子=nextcontents[nextcontents.length-1]；
}
返回(
{第一句话}
{this.state.blinker}
{其他句子}
{this.state.blinker2}
);
}
}
导出默认类型动画；

不要在

componentdiddupdate

中更新状态。组件刚刚渲染，您将使其再次渲染

相反，您应该在

组件willmount

中设置状态。只需使用

componentWillMount

中的正常

setTimeout

即可更新状态

---

如果需要检查当前状态，则在呈现函数中放入“if”逻辑是正常的，不要担心：）

此代码片段有一个错误，它会导致错误的状态值：

this.firstSentenceInterval=setInterval（（）=>{
这是我的国家({
sec2:this.state.sec2+1，
});
}, 100);

必须用以下内容重写：

this.firstSentenceInterval=setInterval（（）=>{
this.setState（prevState=>{
sec2:prevState.sec2+1，
});
}, 100);

你的问题:

我想弄清楚在我想改变状态的时候，是如何设置超时的

如果已创建计时器，则需要在状态更改时添加观察程序并重新创建计时器：

组件将更新（下一步，下一步状态）{
if（this.state.counter！=nextState.counter）{
if（this.textTimer）clearTimeout（this.textTimer）
this.textTimer=setTimeout（（）=>{
this.setState（prevState=>{
sec2:prevState.sec2+1，
});
})
}

你确定要使用setInterval吗？

setTimeout（表达式，超时）

在超时后运行代码/函数一次，而“setInterval（表达式，超时）`则以间隔运行代码/函数，间隔的长度在它们之间。这是关于渲染中条件的基于意见的问题。我不认为（现在）这是不好的。但对我来说，

const

看起来比

let

好，所以你可以用三元op:

const v=c？t:f

重写它。但这只是观点。不要混淆

componentWillMount

和

componentWillUpdate

。如果你建议用

componentwill>替换
componentdiddupdate
lMount

您可能是指

组件将更新

。不，我不会混淆，您不能在

componentWillUpdate

中设置状态。当状态或道具发生更改时，会调用方法

componentdiddupdate

。当组件安装时会调用

componentWillMount

，这是不同的感觉。它如何替换每个组件其他？他的代码不直接调用

setState

，而是作为超时处理程序-因此

setState

当然可以。从您引用的文档中：“您可以在

componentdiddupdate（）中立即调用
setState（）
但请注意，必须将其包装在与上述示例类似的条件中，否则将导致无限循环。”我在componentWillUpdate上尝试了setTimeOut，但它意外地工作了很多次，可能使用at regular react component函数会很好
setTimeOut
函数只能在
componentWillUpdate
处理程序中的某些条件下调用。例如，当
counter
如上面的代码片段所示被更改时。