如何在 React 中使用同步调用

Question

我使用以下方法响应从 userService 调用 getUser 并获取在 getUser 函数中传递的相应用户 ID 的数据。但这是以异步方式完成的，意味着我们的 render 方法在对 getUser 的调用完成之前完成执行，并且 'user' 状态已设置。我想以同步方式完成此操作，以便我们的渲染方法在返回数据并设置状态后执行。我要怎么做。

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

为了更好的用户体验，您应该在 user 加载之前渲染一些东西，最好是加载指示，或者什么都不做。但永远不要冻结进程或等待承诺得到解决。

在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 生命周期挂钩中获取数据，它更加一致。

如何在 React 中使用同步调用

How to use synchronous calling in react

javascript

synchronous

rxjs

reactjs