在我的应用中,我有2个组件(Page
和Home
)。
Home
像这样延伸Page
:
export default class Home extends Page
和Page
只是扩展Component
。
在Page
我有一种从AsyncStorage
async getUser() {
// get from storage
this.setState({user});
}
上述内容在constructor
的{{1}}上调用。
我遇到的问题是Page
在Home
上有一个依赖componentWillMount
的方法。显然,由于this.state.user
方法是异步的,因此无法正常工作。
有没有办法可以获取用户信息,只有在获得该信息后才调用特定方法?
getUser
答案 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"模式。