我有一个ReactNative应用程序,它有一个返回JSON对象的getUserSession
函数。我想调用此函数,然后将setState设置为getUserSession
回调的结果。
class AppContainer extends Component{
constructor(props){
super(props);
this.state = {
selectedTab: 'profile',
}
}
componentDidMount(){
this.fetchData();
this.setState({
loggedIn: true,
});
}
fetchData(){
userService.getUserSessionData(function(result){
// Console log function displays correct result
console.log(result);
this.setState({
user: JSON.stringify(result),
});
})
}
render() {
let currentUser = this.state.user;
return (
<TabBarIOS style={Theme.appContainer}>
<TabBarIOS.Item
title="Profile"
selected={this.state.selectedTab == "profile"}
<NavigatorIOS
initialRoute={{
title: 'Profile',
component: Profile,
passProps: {data: currentUser}
}} />
</TabBarIOS.Item>
</TabBarIOS>
);
}
};
module.exports = AppContainer;
fetchData中的console.log函数显示了预期的行为并准确显示了我想要的内容,但是在下一行它没有正确设置State。
在NavigatorIOS上使用PassProps传递状态时,子组件“Profile”不会收到道具并返回“未定义”。
我试过JSON.stringify()
结果,因为我认为setState会允许一个JSON字符串,但这不起作用
答案 0 :(得分:1)
首先定义初始状态,例如
this.state = {
user: '',
}
然后调用fetchData函数
fetchData(){
let me = this;
userService.getUserSessionData(function(result){
// Console log function displays correct result
console.log(result);
me.setState({ // scope of this doesn't exist in promise based functions
user: JSON.stringify(result),
});
})
}
这将起作用。
相反,请进行一些纠正
render() {
const {user, selectedTab} = this.state; // destructuring ,good practice.
return (
<TabBarIOS style={Theme.appContainer}>
<TabBarIOS.Item
title="Profile"
selected={selectedTab == "profile"}
<NavigatorIOS
initialRoute={{
title: 'Profile',
component: Profile,
passProps: {data: user}
}} />
</TabBarIOS.Item>
</TabBarIOS>
);
}
};
module.exports = AppContainer;
答案 1 :(得分:0)
我认为this
不再指向正确的引用。尝试使用ES6中提供的胖箭头语法重写这样的函数:
fetchData(){
userService.getUserSessionData((result) => {
console.log(result);
this.setState({
user: JSON.stringify(result),
});
})
}
答案 2 :(得分:0)
如何尝试在您的州设置默认值,即
this.state = {
user: '',
loggedIn: false,
etc:'',
}
&#13;