首页 文章

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

提问于
浏览 次
1

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

我想要做的是在其中获取一个API请求，所以我可以在 Headers 内呈现菜单项.. 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}
    }

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

javascript reactjs next.js

3 回答

  • 1

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

    在组件顶部创建一个构造函数，设置默认值，然后检索数据，然后设置setState并渲染它 .

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

    回复于
  • 2

    上面的两个答案很棒!!真的很有帮助 . 这是我使用的代码：

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

    只是在未来遇到任何人遇到这个:)

    回复于
  • 0

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

    回复于

相关问题