Javascript ComponentDidUpdate中的无限循环
我需要将俄语翻译成西班牙语,并在我的状态下更改一些信息。为了实现它,我编写了一个名为“translateHelper”的函数,如下所示:Javascript ComponentDidUpdate中的无限循环,javascript,reactjs,infinite-loop,Javascript,Reactjs,Infinite Loop,我需要将俄语翻译成西班牙语,并在我的状态下更改一些信息。为了实现它,我编写了一个名为“translateHelper”的函数,如下所示: translateHelper(){ 让type=this.state.tipo; 开关(类型){// 案例“ППцццц”: 类型='Proyector'; 打破 案例“Маааааааааааа1072 类型='宣言者'; 打破 案例“Гаааааа”: 类型='Generador'; 打破 案例“Маааааааааааааааа 类型='Generad
translateHelper(){
让type=this.state.tipo;
开关(类型){//
案例“ППцццц”:
类型='Proyector';
打破
案例“Маааааааааааа1072
类型='宣言者';
打破
案例“Гаааааа”:
类型='Generador';
打破
案例“Маааааааааааааааа
类型='Generador Manifestante';
打破
案例“Пцццццццц”:
类型=‘反射器’;
打破
}
if(this.state.sexo==='female'&&type!=='Generador Manifestante'){//根据性别而变化
类型=类型+a
}
else if(this.state.sexo=='female'&&type=='Generador Manifestante'){
类型='Generadora Manifestante'
}
此.setState({//正在更新状态
提波:类型
})
}
尝试从ComponentDidUpdate调用此函数时出现问题。它抛出的错误是:“超过了最大更新深度”。据我所知,这是ComponentDidUpdate中无限循环的bc。但我不明白它在哪里,因为我设置了如下的中断条件:
componentDidUpdate(prevProps,prevState){
如果(prevState.tipo!==this.state.tipo){//my条件
this.translateHelper();
}
}
如何修复它?确实是由
组件diddupdate
方法引起的,当调用translateHelper
时,它修改状态,导致再次调用它,等等,因为没有停止机制。prevState.tipo!==this.state.tipo
检查没有任何作用,您应该检查this.state.tipo
是否不是西班牙语,此时您应该只运行translateHelper
。因为你一直在输入你第一次翻译的结果:
Проектор -> Proyector -> Proyectora -> Proyectoraa -> Proyectoraaa
编辑:
由于字数有限,您可以做的是检查单词是否已翻译,如果已翻译,您不需要再次翻译,对吗?例如:
const translatedWords = ['Proyector', 'Proyectora', ... ]
componentDidUpdate(prevProps, prevState) {
const isTranslated = translatedWords.includes(this.state.tipo);
if (!isTranslated) {
this.translateHelper();
}
}
如果在
this.translateHelper()
之前添加console.log(prevState.tipo,this.state.tipo)
,您会看到什么?@cbrconsole.log('prevState'+prevState.tipo,'this.state'+this.state.tipo)
给我提供了prevstate Proyectoraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
在开关中添加默认值也是一个好主意。因此,最好的做法是修改如下状态:this.state={.state={tipo:{tipoName:'Гааа',notInSpanish:true}
然后在translatehelpernotInSpanish:false
?否,问题在于如果(prevState.tipo!==this.state.tipo)
。只要它是true
,它就会继续运行。你应该检查这个状态。tipo
不是['Proyector','Proyectora','Manifestador',…]
,我应该如何做?@А戥戥戥戥戥戥戥检查编辑。