Javascript 在Header组件Next.js中呈现道具

我在React.js应用程序中有一个组件，使用Next.js-这个组件是Header我正在使用布局内部的这个元素来获取每个Header元素

我想做的是在这里面得到一个API请求，这样我就可以在标题里面呈现菜单项。。API正在返回菜单对象

这是我的密码

import fetch from 'isomorphic-unfetch'
import React, { Component } from "react";
import Link from 'next/link';
import { Config } from "../config.js";

class Header extends Component {

    static async getInitialProps() {
        const menuRes = await fetch(
            `${Config.apiUrl}/wp-json/menus/v1/menus/header-menu`   
        );
        const menu = await postsRes.json();
        return {menu}
    }

    render() {
        console.log(this.props);
        return (
            <div>
                213
            </div>
        );
    }
}

export default Header

---

但我不知道为什么它在组件内部不起作用：（

我建议您只需将数据提取到componentDidMount中，作为组件正常生命周期的一部分。在这里，您可以找到一个解释react生命周期的方法

我建议您将数据提取到componentWillMount中，然后使用组件状态来管理它

在组件顶部创建一个构造函数，设置默认值，并在检索数据时设置state并呈现它

---

道具是你发送给组件的东西，状态是你用来管理组件内部数据的东西。

上面的两个答案非常好！！而且非常有用。下面是我使用的代码：

constructor() {
        super();
        this.state = { data: [] };
    }

    componentDidMount() {
        fetch(`${Config.apiUrl}/wp-json/menus/v1/menus/header-menu`)
          .then(res => res.json())
          .then(json => this.setState({ data: json }));
    }

---

以防万一将来有人遇到这种情况：）

谢谢您提供有关componentDidMount的信息，但我仍然不确定在数据装入后如何检索数据。如果我将异步函数传递到装入中，它会不喜欢。

componentDidMount=async（）=>{const data=wait this.fetchApi（）；this.setState（{data}）；}

这应该可以完成这项工作

constructor() {
        super();
        this.state = { data: [] };
    }

    componentDidMount() {
        fetch(`${Config.apiUrl}/wp-json/menus/v1/menus/header-menu`)
          .then(res => res.json())
          .then(json => this.setState({ data: json }));
    }