ReactNative setState JSON对象

时间:2016-02-28 18:27:12

标签: javascript json react-native

我有一个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字符串,但这不起作用

3 个答案:

答案 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)

如何尝试在您的州设置默认值,即

&#13;
&#13;
this.state = {
  user: '',
  loggedIn: false,
  etc:'',
}
&#13;
&#13;
&#13;