React Native持久化用户数据

时间:2016-05-03 13:42:24

标签: asynchronous reactjs async-await react-native

在我的应用中,我有2个组件(PageHome)。

Home像这样延伸Page

export default class Home extends Page

Page只是扩展Component

Page我有一种从AsyncStorage

获取用户数据的方法
async getUser() {
  // get from storage
  this.setState({user});
}

上述内容在constructor的{​​{1}}上调用。

我遇到的问题是PageHome上有一个依赖componentWillMount的方法。显然,由于this.state.user方法是异步的,因此无法正常工作。

有没有办法可以获取用户信息,只有在获得该信息后才调用特定方法?

getUser

1 个答案:

答案 0 :(得分:2)

  

有没有办法可以获取用户信息并且只能调用特定的信息   方法一旦我有了这些信息?

不是一般意义上的,但当然有一些解决方案。这归结为您具有异步数据依赖性。您需要编写代码,以便只在数据可用后才能调用依赖函数。

最简单的方法可能是使用componentWillUpdate代替componentDidMount并检查您是否收到了所需的数据:

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

(请注意,您不能setState直接componentWillUpdate,但由于您的方法是异步的,因此直到稍后才会发生。您可以使用componentDidUpdate链接另一个setState 1}}打电话。)

另一个选项(我喜欢使用)是使用合成而不是继承。这使得生命周期更容易通过渲染来控制:当所有子项的依赖数据被加载时,父项只能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"模式。