Question

问题，我一直在学习React.js和Next.js，并研究与API集成的端点。我已经能够获取各个帖子的索引上的所有数据，甚至能够用它加载帖子页面。

我已经用Next.js设置了我的项目，这是服务器的设置：

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()

  server.get('/post/:id', (req, res) => {
    const actualPage = '/post'
    const queryParams = { id: req.params.id }
    app.render(req, res, actualPage, queryParams)
  })
})

这应该使 ID 可用。因此，我有一个这样的索引，它可以检索WordPress博客中的所有帖子，可以正常工作，并且我已经完成了路由设置，单击 Link 后，它将引导您完成操作。到上一页...这是以下内容的快速摘要：

class Index extends Component {

    static async getInitialProps(context) {
        const postsRes = await fetch(
            `${Config.apiUrl}/wp-json/wp/v2/posts?_embed`
        );
        const posts = await postsRes.json();
        return {posts}
    }

    render(){
        const posts = this.props.posts.map((post, index) => {
            return (
                <ul key={index}>
                    <li>
                        <Link
                            as={`/post/${post.slug}`}
                            href={`/post?slug=${post.title}&apiRoute=post`}
                        >
                            <a>{post.title.rendered}</a>
                        </Link>
                    </li>
                </ul>
            );
        });

        return(
            <Layout>
                {posts}
            </Layout>
        )
    }

现在在帖子页面上，我添加了以下代码来获取帖子：

import {withRouter} from 'next/router';
import React, { Component } from "react";
import fetch from "isomorphic-unfetch";
import Error from "next/error";
import Layout from '../comps/Layout';
import { Config } from "../config.js";


class Post extends Component {
    static async getInitalProps(context){
        const { id } = context.query;
        const res = await fetch(
            `${Config.apiUrl}/wp-json/wp/v2/posts?slug=${id}`
        );
        const post = await res.json();
        return { post }
    }
    render() {
        console.log(this);

        return(
            <Layout>
            </Layout>
        )
    }
}

export default Post;

但是这不起作用，似乎没有得到：

$ {id}

即使应通过以下方式获得它：

const {id} = context.query;

现在，我是新来的反应者，所以我不确定为什么它不会获得 ID ，还有其他人知道为什么吗？我知道这是正确的端点，如果我在此页面上使用帖子？_embed ，它将控制台注销所有帖子。

我真的很沮丧。任何帮助，将不胜感激！

谢谢

Next.js没有来自Post：id

0 个答案: