[英]ReactNative setState JSON object
I have a ReactNative app that has a getUserSession
function that returns a JSON object. 我有一个ReactNative应用程序,该应用程序具有返回JSON对象的getUserSession
函数。 I am wanting to call this function and then setState to the result of the callback from 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;
The console.log function in fetchData presents the expected behaviour and displays exactly what I am wanting, however on the next line it doesn't setState correctly. fetchData中的console.log函数显示了预期的行为,并准确显示了我想要的内容,但是在下一行中,它的setState不正确。
When passing the state through using PassProps on NavigatorIOS, the child component 'Profile' doesn't receive the props and returns an 'undefined'. 通过在NavigatorIOS上使用PassProps传递状态时,子组件“配置文件”不接收道具,并返回“未定义”。
I have tried to JSON.stringify()
the result because I thought that setState would allow a string of the JSON, however this doesn't work either 我尝试对JSON.stringify()
结果进行处理,因为我认为setState允许使用JSON字符串,但是这也不起作用
First define initial state like 首先定义初始状态如
this.state = {
user: '',
}
then on calling fetchData function 然后在调用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),
});
})
}
this will work. 这将起作用。
Instead of this ,please do some correction 代替此,请进行一些更正
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;
I think this
is no longer pointing to the correct reference. 我认为this
不再指向正确的参考。 Try rewriting the function like this, using the fat arrow syntax available in ES6: 尝试使用ES6中可用的粗箭头语法重写这样的函数:
fetchData(){
userService.getUserSessionData((result) => {
console.log(result);
this.setState({
user: JSON.stringify(result),
});
})
}
How about trying to set a default value on your state, ie 如何尝试在您的状态上设置默认值,即
this.state = { user: '', loggedIn: false, etc:'', }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.