CODEWITHSUNDEEP
javascriptjsonreact-native
Tom Hanson
Tom Hanson

Reputation: 663

ReactNative setState JSON object

I have a ReactNative app that has a getUserSession function that returns a JSON object. I am wanting to call this function and then setState to the result of the callback from 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.

When passing the state through using PassProps on NavigatorIOS, the child component 'Profile' doesn't receive the props and returns an 'undefined'.

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

Upvotes: 0

Views: 6267

Answers (3)

Shobhit
Shobhit

Reputation: 33

First define initial state like

this.state = {
      user: '',
   }

then on calling fetchData function

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;

Upvotes: 1

Jojo Narte
Jojo Narte

Reputation: 3104

How about trying to set a default value on your state, i.e 

this.state = {
  user: '',
  loggedIn: false,
  etc:'',
}

Upvotes: 0

Nader Dabit
Nader Dabit

Reputation: 53681

I think this is no longer pointing to the correct reference. Try rewriting the function like this, using the fat arrow syntax available in ES6:

fetchData(){
  userService.getUserSessionData((result) => {
    console.log(result);
    this.setState({
      user: JSON.stringify(result),
    });
  })
}

Upvotes: 0

Related Questions