4

我想通过我的 React Universal（带有 Next.js）应用程序中的 REST 服务调用接收数据fetch()，然后将结果呈现到 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()然后更新视图，但在通用应用程序中，尤其是在客户端上关闭 JavaScript 时，这是不可能的。

我该如何解决这个问题？

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

4

2 回答 2

2

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

  • 替换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>
  );
}
于 2017-05-06T23:13:25.063 回答
0

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

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

于 2017-05-06T09:20:06.823 回答