node.js - 如何在 React Universal 中呈现从 REST 服务接收到的数据？ (Next.js)

Question

我想使用 fetch() 在我的 React Universal(带有 Next.js)应用程序中通过 REST 服务调用接收数据，然后像这样将结果渲染到 JSX 中:

class VideoPage extends Component {
  componentWillMount() {
    console.log('componentWillMount');

    fetch(path, {
      method: 'get',
    })
      .then(response =>
        response.json().then(data => {
          this.setState({
            video: data,
          });
          console.log('received');
        })
      );
  }

  render() {
    console.log('render');
    console.log(this.state);
    if (this.state && this.state.video) {
      return (
        <div>
          {this.state.video.title}
        </div>
      );
    }
  }
}

export default VideoPage;

不幸的是，输出是这样的:

componentWillMount
render
null
received

这确实有意义，因为对 fetch 的调用是异步的，并且 render() 在对 REST 服务的调用完成之前完成。

在客户端应用程序中，这没有问题，因为状态更改会调用 render()，然后更新 View ，但在通用应用程序中，尤其是在 JavaScript 关闭的情况下客户，这是不可能的。

我该如何解决这个问题？

有没有办法同步调用服务器或者延迟render()？

Answer 1

为了让它工作，我必须做三件事:

• 将 componentWillMount 替换为 getInitialProps()方法
• 结合fetch和await返回数据
• 使用this.props代替this.state

代码现在看起来像这样:

static async getInitialProps({ req }) {
  const path = 'http://path/to/my/service';
  const res = await fetch(path);
  const json = await res.json();
  return { video: json };
}

然后，在 render() 中，我可以通过 this.props.video 访问数据，例如:

render() {
  return (
    <div>{this.props.video.title}</div>
  );
}