尝试使用之前 api 获取的 id 进行 api 获取

Question

所以我试图找到与此相关的信息，但我感到很困惑。我是运行使用 React 的无头 wordpress，我有一个页面可以获取我的单曲 post 和 return。

每个 post（名为 Tjanster 的自定义 post 类型）都有一个与另一个自定义 post 类型相关的 acf 字段，该类型是与 post 关联的 Person .

现在一切都可以获取 post 内容以及带有 ID 和 slug 等的人物对象。但是我需要来自“人物 post 类型的 ACF 内容。

我现在的想法是，我从 post 中的 person 对象获取 ID，然后再执行另一个 api-fetch 直接向 person 端点获取该 id，这种想法是否正确？

这是我的 post json，我使用来自 (http://localhost:8080/wp-json/wp/v2/tjanster)

的 acf.person[0].id

在这里，我得到了 68 的人的 ID，然后我可以向 http://localhost:8080/wp-json/wp/v2/person/68 发出请求，其中 return 是具有正确 acf 信息的对象：

这就是我的 tjanster.js（单页 post-页面）现在的样子：

import Layout from "../components/Layout.js";
import React, { Component } from "react";
import fetch from "isomorphic-unfetch";
import Error from "next/error";
import PageWrapper from "../components/PageWrapper.js";
import Menu from "../components/Menu.js";
import { Config } from "../config.js";

class Tjanster extends Component {
    static async getInitialProps(context) {
        const { slug, apiRoute } = context.query;

        const res = await fetch(
            `${Config.apiUrl}/wp-json/postlight/v1/${apiRoute}?slug=${slug}`
        );
        const tjanster = await res.json();

        return { tjanster };
    }


    render() {
        if (!this.props.tjanster.title) return <Error statusCode={404} />;

        let personId = this.props.tjanster.acf.person[0].ID;
        console.log(personId);

        return (
            <Layout>

                {this.props.tjanster.title.rendered}

            </Layout>
        );
    }
}

export default PageWrapper(Tjanster);

如您所见，我将 person 对象的 ID 作为 personId 保存在 render 下，但我不完全确定下一步该做什么？我想我可以使用 ${Config.apiUrl}/wp-json/wp/v2/person/${personId} 在顶部进行另一次获取，但我不会让它工作，因为我还不能访问 ID。

如有任何想法，我们将不胜感激！

Answer 1

您需要使用javascript Promise 来处理多个异步调用。只需在第一次获取后链接 a 然后，您就可以在可用时访问该 Id。

尝试使用之前 api 获取的 id 进行 api 获取

Trying to do an api fetch using id from earlier api fetch

api

rest

wordpress

headless

reactjs