React Native 持久化用户数据答案

【问题标题】：React Native persisting user dataReact Native 持久化用户数据
【发布时间】：2016-05-04 00:22:01
【问题描述】：

在我的应用程序中，我有 2 个组件（Page 和 Home）。

Home 扩展 Page 像这样：

export default class Home extends Page

而Page 只是扩展Component。

在Page我有一种方法可以从AsyncStorage获取用户数据

async getUser() {
  // get from storage
  this.setState({user});
}

上面是在Page的constructor上调用的。

我遇到的问题是Home 在componentWillMount 上有一个依赖于this.state.user 的方法。显然这是行不通的，因为 getUser 方法是异步的。

有没有一种方法可以获取用户信息，并且只有在获得该信息后才调用特定方法？

export default class Page extends Component {
  async getUser() {
    // get from AsyncStorage
    this.setState({user});
  }
  componentWillMount() {
    this.getUser();
  }
}

export default class Home extends Page {
  async foo(user_id) {
    this.setState({something});
  }

  componentWillMount() {
    this.foo(this.state.user);
  }

  render() {
    return <Text>{this.state.something}</Text>;
  }
}

【问题讨论】：

this.state.user依赖什么方法，什么时候调用？
Home.componentWillMount 上还有另一个异步方法，它依赖于 this.state.user
我已经用示例代码更新了问题
我知道这不是最优雅的选择，但是您可以在页面中获取用户之后执行一些方法，例如page.onUserUpdate，并且您可以在主页或其他页面子类中覆盖此方法。其他选项是为用户定义一些默认值，直到该值准备好在屏幕上呈现，这种方法允许您例如在 UI 中显示某种加载用户过程。
你能在 Home 组件中调用 getUser 吗？ componentWillMount() { super.getUser.then(this.foo) }

标签： asynchronous reactjs async-await react-native

【解决方案1】：

有没有办法我可以获取用户信息并且只调用特定的获得该信息后的方法？

不是一般意义上的，但当然有一些解决方案。这归结为你有一个异步数据依赖。您需要以这样一种方式编写代码，即仅在数据可用后才调用相关函数。

也许最简单的方法是使用 componentWillUpdate 而不是 componentDidMount 并检查您是否收到了所需的数据：

componentWillUpdate(nextProps, nextState) {
    if (nextState.user != null && this.state.user !== nextState.user) {
        this.prepareForUser(nextState.user);
    }
}

（请注意，您不能直接在componentWillUpdate 中使用setState，但由于您的方法是异步的，因此直到以后才会发生。您可以使用componentDidUpdate 链接另一个setState 调用。）

另一个选择（我喜欢使用）是使用组合而不是继承。这使得通过渲染更容易控制生命周期：当所有孩子的依赖数据加载完毕后，父母只能render一个孩子，那么孩子不需要担心与初始加载数据相关的任何时间问题，并且可以通过componentDidMount 为所欲为：

class UserContainer extends Component {
    state = {};
    componentDidMount() {
        this.getUser();
    }
    async getUser() {
        // get user from async store
        this.setState({user});
    }
    render() {
        return (
            <div>
                { this.state.user ? <UserView user={this.state.user} /> : <Spinner /> }
            </div>
        );
    }
}

class UserView extends Component {
    componentDidMount() {
        this.props.user != null
    }
}

这几乎就是"container component" 模式。

【讨论】：