Reactjs 变量元'；组件更新

我正在学习一门外语并翻译它。这是我的第一个react项目，问题是，

finalText

没有随翻译更新

我可以在googleTranslate函数中执行

console.log（translation）

，它可以正常工作。当我尝试将其分配给该函数作用域上方的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;

从“React”导入React；
类CardComponent扩展了React.Component{
render（）{
让data=this.props.data；
设truncated=data.truncated；
var test=新字符串（截断）；
控制台日志（测试）；
var finalText=“”；
var googleTranslate=require（'google-translate'）（'apikey'）；
googleTranslate.translate（data.text，'en'，函数（err，translate）{
finalText=翻译；
});
返回(
{(() => {
如果（测试=='true'）{
返回(
{data.extended_tweet.full_text}
)
}否则{
返回(
翻译文本：{finalText}
)
}
})()}
{新日期（data.created_at）.toLocaleTimeString（）}
);
}
}
导出默认组件；

主要问题是转换是异步进行的。你打电话给谷歌，然后不用等待，剩下的代码会一直运行，直到谷歌做出响应。然而，当谷歌做出回应时，已经太晚了，你已经呈现了一切。控制台日志工作的原因是它也是异步的！它比谷歌慢，所以在你得到结果后就会发生

幸运的是，使用React，有一个简单的解决方案。我们可以在组件挂载时启动代码，然后当Google响应时，我们可以告诉React再次进行渲染。在此了解更多信息

class CardComponent扩展了React.Component{
构造函数（）{
超级（道具）；
this.state={finalText:''}；
}
componentDidMount（）{
让data=this.props.data；
设truncated=data.truncated；
var googleTranslate=require（'google-translate'）（'apikey'）；
googleTranslate.translate（data.text，'en'，函数（err，translate）{
//通过调用set state，React将知道再次渲染
这是我的国家({
最后一段：翻译
});
});
}
render（）{
返回(
//所有要在此处呈现的html
this.state.finalText

);
}
}

主要问题是转换是异步进行的。你打电话给谷歌，然后不用等待，剩下的代码会一直运行，直到谷歌做出响应。然而，当谷歌做出回应时，已经太晚了，你已经呈现了一切。控制台日志工作的原因是它也是异步的！它比谷歌慢，所以在你得到结果后就会发生

幸运的是，使用React，有一个简单的解决方案。我们可以在组件挂载时启动代码，然后当Google响应时，我们可以告诉React再次进行渲染。在此了解更多信息

class CardComponent扩展了React.Component{
构造函数（）{
超级（道具）；
this.state={finalText:''}；
}
componentDidMount（）{
让data=this.props.data；
设truncated=data.truncated；
var googleTranslate=require（'google-translate'）（'apikey'）；
googleTranslate.translate（data.text，'en'，函数（err，translate）{
//通过调用set state，React将知道再次渲染
这是我的国家({
最后一段：翻译
});
});
}
render（）{
返回(
//所有要在此处呈现的html
this.state.finalText

);
}
}