Question

我正在学习外语并进行翻译。这是我的第一个React项目，问题是dm/的翻译没有更新。

我可以在googleTranslate函数中执行finalText，它可以正常工作。当我尝试将其分配给该函数作用域上方的finalText变量时，它将不会显示，它始终为空白。

console.log(translation)

Answer 1

主要问题是翻译是异步发生的。您向Google打电话，然后不用等待，而是运行其余代码，直到Google做出响应。但是，当Google做出回应时，为时已晚，您已经呈现了所有内容。控制台日志起作用的原因是因为它也是异步的！它比Google慢，因此会在您返回结果后发生。

幸运的是，有了React，有一个简单的解决方法。我们可以在组件安装时启动您的代码，然后当Google响应时，我们可以告诉React重新进行渲染。在这里https://reactjs.org/docs/state-and-lifecycle.html

了解更多信息

class CardComponent extends React.Component {
    constructor() {
        super(props);
        this.state = {finalText: ''};
    }

    componentDidMount() {
        let data = this.props.data;
        let truncated = data.truncated;

        var googleTranslate = require('google-translate')('apikey');
        googleTranslate.translate(data.text, 'en', function(err, translation) {
            // by calling set state, React will know to render again
            this.setState({
                finalText: translation
            });
        });
    }

    render() {
        return (
            // all the html you want to render in here
            <p>this.state.finalText</p>
        );
    }
}

变量不会在组件上更新

1 个答案: