Question

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

我想做的就是在其中获取一个API请求，这样我就可以在标题内呈现Menu项。API返回Menu对象。

这是我的代码。

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

但是我不知道为什么它不能在组件内部工作：（

Answer 1

我建议您简单地在componentDidMount中获取数据，作为组件常规生命周期的一部分。在这里您可以找到great diagram来说明反应生命周期

Answer 2

我建议在componentWillMount中获取数据，然后使用组件状态进行管理。

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

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

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

以防万一将来有人碰到这个：）

标题组件Next.js React内部的渲染道具

3 个答案: