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

Question

我想在我的 React Universal（使用 Next.js）应用程序中使用 fetch() 通过 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

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

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

我该如何解决这个问题？

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

Answer 1

您可以添加 static async getInitialProps () {} 以在页面组件呈现之前将数据加载到道具中。

更多信息在这里：https://github.com/zeit/next.js/blob/master/readme.md#fetching-data-and-component-lifecycle

Answer 2

为了让它工作，我必须做 3 件事：

用getInitialProps()方法替换componentWillMount
合并 fetch 与 await 和 return 数据
使用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>
  );
}

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

How to render data received from a REST service in React Universal? (Next.js)

node.js

reactjs

react-jsx

next.js

react-universal