在 Header 组件 Next.js React 中渲染道具答案

【问题标题】：Render Props inside of Header Component Next.js React在 Header 组件 Next.js React 中渲染道具
【发布时间】：2019-04-19 10:14:54
【问题描述】：

我的 React.js 应用程序中有一个组件，使用 Next.js - 这个组件是 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

我还在学习反应，所以如果我在这方面 100% 错了，请原谅。只是道具没有返回任何东西：

this.props

我在网上找不到任何人谈论这个，否则我会很高兴地读到它。显然这适用于 page.js 并返回我的所有项目。

static async getInitialProps(context) {
        const { id } = context.query
        const postsRes = await fetch(
            `${Config.apiUrl}/wp-json/wp/v2/pages?slug=sample-page`   
        );
        const posts = await postsRes.json();
        return {posts}
    }

但我不知道为什么它不能在组件内部工作:(

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

我建议您只需在 componentDidMount 中获取数据，作为组件常规生命周期的一部分。在这里你可以找到一个 great diagram 解释反应生命周期

【讨论】：

感谢有关 componentDidMount 的信息，但我仍然不确定如何在数据挂载后检索数据。如果我通过异步函数进入挂载，它不喜欢它。
componentDidMount = async () => { const data = await this.fetchApi(); this.setState({data}); }; 应该可以完成这项工作

【解决方案2】：

我建议在 componentWillMount 中获取您的数据，然后使用您的组件状态来管理它。

在组件顶部创建一个构造函数，设置默认值，并在您检索数据的那一刻，然后 setState 并呈现它。

props 是你发送给组件的东西，而 state 是你用来管理组件内部数据的东西。

【讨论】：

【解决方案3】：

上面的两个答案太棒了！！真的很有帮助。这是我使用的代码：

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 }));
    }

以防以后有人遇到这个:)

【讨论】：