当用户在 React Native 中按下返回按钮时更新状态答案

【问题标题】：Update state when user press back button in React Native当用户在 React Native 中按下返回按钮时更新状态
【发布时间】：2017-07-03 22:02:43
【问题描述】：

我使用 react-navigation 来管理路线。这是我的 Home 组件：

class HomeScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: {
            firstname: 'John',
            avatar: 'john-profile.png',
            location: 'Canada',
         }
      }
   }

   componentDidMount() {
      AsyncStorage.getItem('userProfile', (errs, result) => {
         this.setState({userProfile: JSON.parse(result)});
      });
   }

   render() {
      return (
         <View>
            <Image src="{this.state.userProfile.avatar}" />
            <Text>Firstname: {this.state.userProfile.firstname}</Text>
            <Text>Location: {this.state.userProfile.location}</Text>
         </View>
      );
   }
}

这是个人资料屏幕：

class ProfileScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: null,
      }
   }

   componentDidMount() {
      AsyncStorage.getItem('userProfile', (errs, result) => {
         this.setState({userProfile: JSON.parse(result)});
      });
   }

   save() {

      var userSavedProfile = this.state.userProfile;

      userSavedProfile.firstname = "Peter";
      userSavedProfile.avatar = "peter-avatar.png";
      userSavedProfile.location = "EEUU";

      this.setState({userProfile: userSavedProfile});

      AsyncStorage.setItem('userProfile',     JSON.stringify(this.state.userProfile), () => {});

   }

   render() {
      return (
         <View>
            <Button title="Save" onPress={() => this.save()}  />
         </View>
      );
   }
}

当我保存新的用户信息并在标题中按下返回按钮（反应导航）时，用户配置文件是旧的，名字 = John 等...当用户按下返回按钮并刷新数据时，如何从主页更新状态？

【问题讨论】：

我也遇到了同样的问题，但我解决了。你能告诉我，你是如何进入个人资料屏幕的？ home 是个人资料屏幕的父类吗？
请告诉我，然后我会在这里发布我的代码。

标签： react-native react-navigation

【解决方案1】：

您可以使用 react-native 中的 BackHandler https://facebook.github.io/react-native/docs/backhandler.html 您可以在 backhandler 的函数内部更改状态

【讨论】：

但是在这种情况下，在 ProfileScreen 上使用后处理程序返回 HomeScreen。在文档中，我看到不适用于 iOs 设备。当用户从 ProfileScreen 按下返回按钮时，我需要在主页中刷新状态。
据我了解，您希望通过 ProfileScreen 中的操作更新 HomeScreen 中的状态，为此在主屏幕中声明一个函数，如 getData() 在 HomeScreen getData 中写入所有逻辑，然后将其作为道具发送到 ProfileScreen 并在按钮的 onPress 中调用函数

【解决方案2】：

你可以使用componentDidUpdate(){...}insted componentDidMount(){}

【讨论】：

【解决方案3】：

我认为您的应用程序需要一个状态管理器，您可以在其中存储您的用户信息并在应用程序的任何位置访问它。你应该看看Redux。它会满足您的需求，并且主屏幕中的信息会自动更新。

【讨论】：

【解决方案4】：

但是对于任何需要此功能的人来说，这里的反应原生应用程序是您可以尝试的解决方案。使用反应导航。

import {withNavigationFocus} from "react-navigation";
class Profile extends Component {
    ...
}
export default withNavigationFocus(Profile);

【讨论】：

【解决方案5】：

可以有两种解决方法，看看 -

1在参数中发送回调

class HomeScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: {
            firstname: 'John',
            avatar: 'john-profile.png',
            location: 'Canada',
         }
      }

      this.getUserData = this.getUserData.bind(this);
   }

   componentDidMount() {
       this.getUserData;
   }

   getUserData = () =>{
         AsyncStorage.getItem('userProfile', (errs, result) => {
            this.setState({userProfile: JSON.parse(result)});
         });
    }

   render() {
      return (
         <View>
            <Image src="{this.state.userProfile.avatar}" />
            <Text onPress={()=>this.props.navigation.navigate('ProfileScreen', this.getUserData)}>Firstname: {this.state.userProfile.firstname}</Text>
            <Text>Location: {this.state.userProfile.location}</Text>
         </View>
      );
   }
}
class ProfileScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: null,
      }
   }

   componentDidMount() {
      AsyncStorage.getItem('userProfile', (errs, result) => {
         this.setState({userProfile: JSON.parse(result)});
      });
   }

   save() {

      var userSavedProfile = this.state.userProfile;

      userSavedProfile.firstname = "Peter";
      userSavedProfile.avatar = "peter-avatar.png";
      userSavedProfile.location = "EEUU";

      this.setState({userProfile: userSavedProfile});

      AsyncStorage.setItem('userProfile',     JSON.stringify(this.state.userProfile), () => {});

      //this is the magic
      this.props.navigation.state.params.getUserData();

   }

   render() {
      return (
         <View>
            <Button title="Save" onPress={() => this.save()}  />
         </View>
      );
   }
}

2在 HomeScreen 构造函数上添加这个（脏的）

this.props.navigation.addListener(
      'didFocus',
      payload => {
        this.setState({is_updated:true});
      }
);

【讨论】：