反应原生 setState JSON 对象答案

【问题标题】：ReactNative setState JSON object反应原生 setState JSON 对象
【发布时间】：2016-02-28 18:27:12
【问题描述】：

我有一个 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 函数呈现了预期的行为并准确显示了我想要的内容，但是在下一行它没有正确地 setState。

在 NavigatorIOS 上使用 PassProps 传递状态时，子组件 'Profile' 没有接收到 props 并返回一个 'undefined'。

我已经尝试JSON.stringify() 结果，因为我认为 setState 将允许 JSON 字符串，但这也不起作用

【问题讨论】：

标签： javascript json react-native

【解决方案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;

【讨论】：

【解决方案2】：

我认为this 不再指向正确的引用。尝试像这样重写函数，使用 ES6 中可用的粗箭头语法：

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

【讨论】：

谢谢，这似乎奏效了。但是我发现在加载应用程序时，它会返回“未定义”的值。然后当我重新加载模拟器时，它会返回正确的值
也许在fetchData函数完成后设置登录状态？

【解决方案3】：

尝试为您的状态设置默认值怎么样，即

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

【讨论】：