3

我正在使用 Next.js，在 _app.js 页面（我们在其中设置一般 webapp 状态）我有 2 种类型的数据，我需要在标题中拥有（因此对于每个组件）。

1）第一种类型是标题信息，此信息应在应用加载之前呈现。我将使用 get getInitialProps 调用端点并将它们放入 props 中，然后再到 componentWillMount 中将它们添加到状态中。

2）第二种类型是搜索组件的数据，它是很多数据，我不特别介意在应用程序已经呈现时加载它，因为它没有显示在第一个用户视觉中。所以我猜测这里最好使用 componentDidMount 和 asynchorslly 调用获取 serach 对象数据的端点，而不是使用它添加设置状态。

这个问题的目的是双重的：

1) 回顾 - 我是否正确地考虑了这一点，还是我错过了什么？

2）问题 - 现在，当数据在第一次渲染后加载时，我像这样传递数据：_app.js -> Layout -> Menu -> SearchBar 所以我的问题是，在我的 searchBar 我需要做类似的事情

componentDidMount() {
    this.setState({ options: this.props.searchBarSource })
}

但是，因为 _app.js 正在使用异步调用填充这些数据，这是否意味着我将始终得到一个空对象？W解决这个问题的正确方法是什么？如果我将 TimeOut 设置为 3 秒左右，然后设置数据是正常的解决方案还是非常hacky，还有更好的方法吗？

4

1 回答 1

1

您正在尝试做的事情是有道理的。来到 NextJS，您需要非常慎重地决定哪些数据应该加载服务器端，哪些不应该。

这里有一些提示：

  1. 没有必要setState在搜索组件中，你可以this.props.searchBarSource像Kunukn提到的那样使用。

    [注意 - 如果您正在结合getInitialProps客户端（浅路由），当用户导航到新的客户端路由时，initialProps将未定义。一种解决方法可能是存储initialProps在state本地存储中。]

  2. 要点getInitialProps是在组件挂载之前加载异步数据。您将始终收到已解决Promise的 on componentDidMount，因此您this.props.searchBarSource永远不会为空（或更准确地说，pending）。

于 2019-01-03T15:05:58.920 回答