时间戳

首页 > 解决方案 > ComponentDidUpdate 中的无限循环

javascript - ComponentDidUpdate 中的无限循环

问题描述

我需要从俄语翻译成西班牙语，并在我的 React 状态下更改一些信息。为了实现它，我编写了一个名为“translateHelper”的函数，如下所示：

translateHelper() {
        let type = this.state.tipo; 
        switch(type) { //translating
            case 'Проектор':
                type = 'Proyector';
                break;
            case 'Манифестор':
                type = 'Manifestador';
                break;
            case 'Генератор':
                type = 'Generador';
                break;
            case 'Манифестирующий генератор':
                type = 'Generador Manifestante';
                break;
            case 'Рефлектор':
                type = 'Reflector';
                break;        
        }
        if (this.state.sexo === 'female' && type !== 'Generador Manifestante') { //changes depending on sex
            type = type + 'a'
        }
        else if (this.state.sexo === 'female' && type === 'Generador Manifestante') {
            type = 'Generadora Manifestante'
        }
        this.setState({ //updating state
            tipo: type
        })
    }

当我尝试从 ComponentDidUpdate 调用此函数时出现问题。它抛出错误说：“超过最大更新深度”。据我了解，这发生在 ComponentDidUpdate 中的无限循环之前。但是我不明白它在哪里，因为我设置了如下所示的中断条件：

componentDidUpdate(prevProps, prevState) {
        if (prevState.tipo !== this.state.tipo) { //my condition
            this.translateHelper();
        }
    }

我该如何解决？

标签： javascriptreactjsinfinite-loop

解决方案

Indeed 是在您的componentDidUpdate方法中引起的，当translateHelper被调用时，它会修改state，导致再次调用它，依此类推，因为没有停止机制。prevState.tipo !== this.state.tipo检查没有做任何事情，你应该检查是否this.state.tipo不在，那Spanish是你应该只运行的时候translateHelper。因为你一直在提供你第一​​次翻译的结果：

Проектор -> Proyector -> Proyectora -> Proyectoraa -> Proyectoraaa

编辑：

由于单词的数量是有限的，你可以做的是检查单词是否已经翻译，如果已经翻译，你不需要再次翻译对吗？例如：

const translatedWords = ['Proyector', 'Proyectora', ... ]

componentDidUpdate(prevProps, prevState) {
        const isTranslated = translatedWords.includes(this.state.tipo);
        if (!isTranslated) { 
            this.translateHelper();
        }
    }

推荐阅读