继续得到这个错误，而试图写一个应用程序与第三方API工作
TypeError:这个。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>
);
}
});
回调是在不同的上下文中进行的。你需要绑定到这个，以便在回调中访问:
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');
现在在react with es6/7中，你可以像这样用箭头函数将函数绑定到当前上下文，发出请求并解决承诺:
listMovies = async () => {
const request = await VK.api('users.get',{fields: 'photo_50'});
const data = await request.json()
if (data) {
this.setState({movies: data})
}
}
使用这个方法，你可以很容易地在componentDidMount中调用这个函数，并在渲染函数中渲染html之前等待数据。
我不知道你项目的大小，但我个人建议不要使用组件的当前状态来操作数据。
你应该使用外部状态比如Redux或者Flux或者其他的。
如果您使用箭头函数，则不需要将此分配给局部变量。箭头函数自动接受绑定，您可以避开范围相关的问题。
下面的代码解释了如何在不同的场景中使用箭头函数
componentDidMount = () => {
VK.init(() => {
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},(data) => {
if(data.response){
that.setState({ //this available here and you can do setState
FirstName: data.response[0].first_name
});
console.info(that.state.FirstName);
}
});
}, () => {
console.info("API initialisation failed");
}, '5.34');
},
在这里，这个上下文正在发生变化。使用箭头函数保持React类的上下文。
VK.init(() => {
console.info("API initialisation successful");
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);
}
});
}, function(){
console.info("API initialisation failed");
}, '5.34');
