javascript - 如何在react中使用同步调用

Question

我在 react 中使用以下方法从 userService 调用 getUser 并获取在 getUser 函数中传递的相应用户 ID 的数据。但这是以异步方式完成的，意味着我们的渲染方法在对 getUser 的调用完成并设置“用户”状态之前完成执行。我想以同步方式完成此操作，以便我们的渲染方法在数据返回并设置状态后执行。 我将如何做到这一点。

componentWillMount() {
    var id = this.props.match.params.id;

    UserService.getUser(id)
    .then(res => {this.setState({
                user : res.data
            });
            console.log(this.state.user);
        });

  };

我使用 componentWillMount() 因为它在渲染方法之前执行。

Answer 1

您应该在加载用户之前渲染一些内容以获得更好的用户体验，最好是加载指示，或者什么也不渲染。但切勿卡住流程或只是等待 promise 得到解决。

在 render 方法中，执行类似以下操作:

render() {
    if (!this.state.user) {
        return null;    // Or render something else before the user is loaded
    } else {
        return <SomeElement user={this.state.user} />;
    }
}

另外，为了更好的实践，请在 componentDidMount 生命周期 Hook 中进行数据获取，这样更加一致。