Javascript 无法设置然后修改组件的状态

我读过类似的错误消息，但区别在于大多数错误消息都是围绕事件绑定的

我收到此错误：

无法读取未定义的属性“setState”

我在

this.setState（state=>{

我试图消除这一点，在我开始编写代码之前，我只是简单地使用了

this.state.finalText=translation；

无论我做什么，我都无法让翻译后的文本在没有状态错误的情况下呈现

这是我与react合作的第二天，如果能给我一个好的解释，我将不胜感激

import React from 'react';

class CardComponent extends React.Component {
    constructor(props) {

        super(props);
        let data = this.props.data;
        this.state = {finalText: ""};
        let truncated = data.truncated;
    }
    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
            console.log(translation);

            this.setState(state => {
                state.finalText = translation;
                return state;
              });
        });
    }

    render() {
        let data = this.props.data;
        let truncated = data.truncated;
        var test = new String(truncated);




        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>ok</span>
                            //<span className="black-text"> {data.extended_tweet.full_text}</span>
                        )
                        } else {
                        return (
                            <span className="black-text">translated text: {this.state.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{
建造师（道具）{
超级（道具）；
让data=this.props.data；
this.state={finalText:”“}；
设truncated=data.truncated；
}
componentDidMount（）{
让data=this.props.data；
设truncated=data.truncated；
var googleTranslate=require（'google-translate'）（'apikey'）；
googleTranslate.translate（data.text，'en'，函数（err，translate）{
//通过调用set state，React将知道再次渲染
console.log（翻译）；
this.setState（state=>{
state.finalText=翻译；
返回状态；
});
});
}
render（）{
让data=this.props.data；
设truncated=data.truncated；
var test=新字符串（截断）；
返回(
{/*} -*/}
{(() => {
如果（测试=='true'）{
返回（ok
//{data.extended_tweet.full_text}
)
}否则{
返回(
翻译文本：{this.state.finalText}
)
}
})()}
{/*新日期（data.created_at）.toLocaleTimeString（）*/}
{/* */}
);
}
}
导出默认组件；

您的问题似乎是。如果您将回调函数从

函数…

更改为箭头函数

（）=>…

，则

此

将绑定到封闭词法上下文的

此

，而不是执行上下文的

此

。因此修复：

googleTranslate.translate(data.text, 'en', (err, translation) => {
    this.setState({
        finalText: translation
    });
});

您的问题似乎是。如果您将回调从

函数…

更改为箭头函数

（）=>…

，则

此

将绑定到封闭词法上下文的

此

，而不是执行上下文的

此

。因此修复：

googleTranslate.translate(data.text, 'en', (err, translation) => {
    this.setState({
        finalText: translation
    });
});