如何使用Next.js从组件文件夹中获取API详细信息？

Question

我有一个可重用的组件，我已经在组件文件夹上创建了一个，我拥有登录到系统的用户的所有详细信息，这是一个标题部分。

我正在尝试使用抓取与.getInitialPropsisomorphic-unfetch

static async getInitialProps(ctx) {

    const UserdetailsRespone = await fetch("my API url");

    const UserdetailsJson = await UserdetailsRespone.json();

    return { UserDetails: UserdetailsJson.root[0] };

 }

在渲染方法中，当我记录 this.props.UserDetails 时，我得到 .它与我在页面文件夹中执行的API获取相同，我可以在其中获取API响应。但是我无法在组件文件夹中获取响应。undefined

有人可以帮我解决它吗？提前致谢。

Answer 1

getInitialProps运行服务器端和客户端。因此，您必须小心如何使用它。我通常用于检查是否被称为服务器端。typeof Window === 'undefined'getInitialProps如果你有一个子组件，你需要在每次挂载它时进行调用，为什么不坚持呢？componentDidMountasync componentDidMount() {    const userDetailsResponse = await fetch("my API url");    const userDetailsJson = await userDetailsResponse.json();    this.setState({userDetails: userDetailsJson})}然后，您可以从状态而不是 props 访问属性。

Answer 2

如果在子组件中使用，则它不起作用。它仅适用于每个页面的默认导出。来自官方文档getInitialProps编辑：正如Uzair Ashraf所提到的，使用是在组件中获取数据的方法。您也可以看看swr。fetch