为什么代码段的输出在“ true”之下?
class InstagramGallery extends React.Component {
constructor(props) {
super(props);
this.state = {
images: true
};
}
componentDidMount() {
var accessToken = '*Instagram token*';
var instagramApi = new Instagram(accessToken);
instagramApi.userSelfMedia().then(function(result) {
this.setState({
images: false,
});
}, function(err) {
console.log(err);
});
}
render() {
console.log(this.state.images);
return (
<div className="instagram-gallery">
</div>
)
}
}
据我所知,构造函数首先被调用。因此,images=true
之后会用console.log(true)
进行渲染,然后调用componentDidMount
。从instagram中获取数据后,我更新了组件状态,应使用images=false
重新呈现组件。我在哪里错了?
答案 0 :(得分:4)
您正在对instagramAp.userSelfMedia
回调使用常规函数,因此会丢失this
上下文。改用箭头功能:
instagramApi.userSelfMedia().then(
result => {
this.setState({
images: false
});
},
function(err) {
console.log(err);
}
);
常规函数创建自己的词法作用域,因此this
不会将类指向回调函数。箭头函数不会创建自己的词法作用域,this
指向您的组件,您可以使用this.setState()
。
使用箭头函数可避免绑定函数或将this
保留在另一个变量中,例如:
var accessToken = "*Instagram token*";
var instagramApi = new Instagram(accessToken);
const that = this;
instagramApi.userSelfMedia().then(
function(result) {
that.setState({
images: false
});
},
function(err) {
console.log(err);
}
);
答案 1 :(得分:2)
我已经很久没有使用RN了,但这有影响吗?
componentDidMount() {
var accessToken = '*Instagram token*';
var instagramApi = new Instagram(accessToken);
instagramApi.userSelfMedia().then((result) => { //USING ARROW FUNCTION
this.setState({
images: false,
});
}, function(err) {
console.log(err);
});
}
我添加了一个箭头函数,以防止instagramApi.userSelfMedia()中的'this.state'与'this'混淆。
答案 2 :(得分:2)
因为此功能不可用
使用箭头功能
instagramApi.userSelfMedia().then((result) => {
this.setState({
images: false,
});
}, function(err) {
console.log(err);
});
}
或手动绑定
instagramApi.userSelfMedia().then(function(result) {
this.setState({
images: false,
});
}.bind(this), function(err) {
console.log(err);
});
}