Question

如果有一个非常明显的解决方案，我会提前道歉，但是我对React.js还是很陌生。

我正在与google-translate api一起构建一个简单的翻译器组件。文本输入存储在状态中并由translateInput（）使用，然后我想用翻译后的文本设置状态。不幸的是，我不能，但是我可以console.log由googleTranslate函数返回的值。为什么会这样呢？我必须以某种方式绑定回调函数吗？

谢谢！

import React, { Component } from "react";
import { googleTranslate } from '../utils/googleTranslate';

class Translator extends Component {
    constructor(){
        super();

        this.state = {
             input:'',
             translatedInput: '',
        }
    }

    handleTextInput = e => {
        this.setState({input:e.target.value})
    }

    translateInput = () => {
        googleTranslate.translate([this.state.input],"en", "de", 
        function (err, translations){        
      //this.setState({translatedInput:translations.translatedText}) 
      //TypeError: Cannot read property 'setState' of undefined
        console.log(translations.translatedText)
        })
    }

Answer 1

您正在使用的函数的上下文无法通过this关键字访问组件，因为您正在使用function关键字创建函数作用域。使用箭头功能可以达到目的：

 translateInput = () => {
        googleTranslate.translate([this.state.input],"en", "de", 
        (err, translations) => {        
      this.setState({translatedInput:translations.translatedText}) 
        console.log(translations.translatedText)
        })
    }

为什么我可以console.log这个值而不是setState？

1 个答案: