变量不会更新组件

Question

我要学一门外语，然后翻译它。这是我的第一个react项目，问题是finalText没有被翻译更新。

我可以在console.log(translation)函数中做一个googleTranslate，它可以工作。当我试图将它赋值给它不会显示的函数的作用域上的finalText变量时，它始终是空的。

import React from 'react';

class CardComponent extends React.Component {
    render() {
        let data = this.props.data;


        let truncated = data.truncated;
        var test = new String(truncated);
        console.log(test);
        var finalText = '';

        var googleTranslate = require('google-translate')('apikey');
        googleTranslate.translate(data.text, 'en', function(err, translation) {
            finalText = translation;
          });

        return (
            <div>
                <div className="card-panel grey lighten-5 z-depth-3 hoverable thin">
                    <div className="row valign-wrapper">
                        <div className="col s2">
                            <img src={data.user.profile_image_url} alt={data.user.name} className="circle responsive-img" />
                        </div>
                        <div className="col s10 left-align">
                        {(() => {
                        if (test=='true') {
                        return (
                            <span className="black-text"> {data.extended_tweet.full_text}</span>
                        )
                        } else {
                        return (
                            <span className="black-text">translated text: {finalText}</span>
                        )
                        }
                    })()}
                        </div>

                    </div>
                    <div className="row valign-wrapper right-align chip hoverable">
                    {new Date(data.created_at).toLocaleTimeString()}
                    </div>
                    <div className="row valign-wrapper right-align chip hoverable">
                        <a href={`https://twitter.com/${data.user.screen_name}`} target="_blank">{`@${data.user.screen_name}`}</a>
                    </div>
                </div>

            </div>
        );
    }
}

export default CardComponent;

Answer 1

主要问题是转换是异步进行的。您调用Google，然后不再等待，剩下的代码将一直运行直到Google响应。然而，当谷歌做出回应时，已经太晚了，你已经把一切都做好了。控制台日志工作的原因是因为它也是异步的！它比Google慢，所以它发生在你得到结果之后。

幸运的是，有反应，有一个简单的解决办法。我们可以在组件挂载时启动您的代码，然后当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>
        );
    }
}