反应this.setState不是一个函数

我是React中的新成员，我试图编写一个使用API​​的应用程序。 我不断收到此错误： TypeError：this.setState不是我尝试处理API响应时的函数 。 我怀疑这是绑定有什么问题，但我不知道如何解决这个问题。 这是我的组件的代码：

var AppMain = React.createClass({ getInitialState: function() { return{ FirstName: " " }; }, componentDidMount:function(){ VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }); }, function(){ console.info("API initialisation failed"); }, '5.34'); }, render:function(){ return ( <div className="appMain"> <Header /> </div> ); } }); 

Answer 1

callback是在不同的上下文中进行的。 你需要bind到this为了在callback中进行访问：

 VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }.bind(this)); 

编辑：看起来像你必须绑定既init和api调用：

 VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }.bind(this)); }.bind(this), function(){ console.info("API initialisation failed"); }, '5.34'); 

Answer 2

您可以避免使用ES6箭头函数.bind（this）。

 VK.api('users.get',{fields: 'photo_50'},(data) => { if(data.response){ this.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(this.state.FirstName); } }); 

Answer 3

你可以在调用api方法之前保存一个引用：

 componentDidMount:function(){ var that = this; VK.init(function(){ console.info("API initialisation successful"); VK.api('users.get',{fields: 'photo_50'},function(data){ if(data.response){ that.setState({ //the error happens here FirstName: data.response[0].first_name }); console.info(that.state.FirstName); } }); }, function(){ console.info("API initialisation failed"); }, '5.34'); }, 

Answer 4

现在ES6有箭头function，真正有帮助，如果你真的混淆bind（this）expression式，你可以尝试箭头function

这是我的方式。

 componentWillMount() { ListApi.getList() .then(JsonList => this.setState({ List: JsonList })); } //Above method equalent to this... componentWillMount() { ListApi.getList() .then(function (JsonList) { this.setState({ List: JsonList }); }.bind(this)); }