Next.js 在嵌套子组件中获取数据

Question

请考虑我的情况：在Next.js中，我构建了一个组件，该组件旨在成为一个子组件，它自己获取数据（没有任何父组件），现在我发现这是作者不允许的下一个.js。但是，他们提到该async-reactor库是一种解决方法：

也许你可以尝试像 async-reactor 这样的东西

但是我尝试使用async-reactor并且仍然无法在 Next.js 的嵌套子组件中呈现提取。这是我尝试过的：

// my child component 

import React from 'react';

import {asyncReactor} from 'async-reactor';

import fetch from 'isomorphic-unfetch';

function Loader() {

  return (

<div>

    <h2>Loading ...</h2>

</div>

  );

}

async function AsyncPosts() {

  const data = await fetch('https://jsonplaceholder.typicode.com/posts');

  const posts = await data.json();

  return (

<div>

    <ul>

      {posts.map((x) => <li key={x.id}>{x.title}</li>)}

    </ul>

</div>

  );

}

export default asyncReactor(AsyncPosts, Loader);

我希望这可以工作，但除了“Div”一词（甚至不应该呈现“Div”）之外，它不会呈现任何内容。

有没有办法在 Next.js 的子组件中获取？到目前为止，我没有尝试过任何工作，但我发现很难相信这真的是不可能的。

Answer 1

正如@Arunoda 写道：我们没有计划在嵌套组件中添加对调用getInitialProps的支持。重点是getInitialProps，您可以在任何组件内发出 ajax 请求，但要知道它的优点/缺点。这个 ajax 请求将在componentDidMount/&nbsp;useEffecthook内部实现，而不是在服务器端调用。好处之一是延迟加载数据，您不需要预先加载整个页面的数据，这意味着更少的数据 => 更小的网络请求。一个缺点可能是这部分不会传递给 next 的 SSR 机制，因此不容易被 SEO。