ComponentDidUpdate 中的无限循环

Question

我需要将俄语翻译成西班牙语并更改我的 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();
        }
    }

我该如何解决？

Answer 1

的确是你的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();
        }
    }

ComponentDidUpdate 中的无限循环

Infinite loop in ComponentDidUpdate

javascript

infinite-loop

reactjs

编辑：