Question

我正在从一个API提取ID，并将其用作从另一个API提取的变量。不幸的是，我不能确定总是从第一次获取中获得一个ID，因此我需要适当地分配静态ID或以其他方式处理错误（最好根本不返回该函数）。

这是我的代码现在的样子，有什么想法吗？：

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 tjansterRes = await fetch(
            `${Config.apiUrl}/wp-json/postlight/v1/${apiRoute}?slug=${slug}`
        );
        const tjanster = await tjansterRes.json();

        const personId = tjanster.acf.person[0].ID;
        const personRes = await fetch(
            `${Config.apiUrl}/wp-json/wp/v2/person/${personId}`
        );
        const person = await personRes.json();

        return { tjanster, person };
    }

    render() {

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

        return (
            <Layout>
                <Menu menu={this.props.headerMenu} />

                <div className="single">

                    {this.props.person.title.rendered}

                    {this.props.tjanster.title.rendered}

                </div>

            </Layout>
        );
    }
}

export default PageWrapper(Tjanster);

我虽然想以某种方式解决它，但我只能得到未定义personId的信息：

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

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

    if (tjanster.acf.person[0] === undefined) {
        const personId = 64;
    } else {
        const personId = tjanster.acf.person[0].ID; 
    }
    const personRes = await fetch(
        `${Config.apiUrl}/wp-json/wp/v2/person/${personId}`
    );
    const person = await personRes.json();

    return { tjanster, person };
}

最好，如果值未定义，我希望它不返回“ person”，但是我不确定该怎么做。

Answer 1

要绝对确定您正在接收一个值，并且正在接收一个正确的值，则必须通过验证每个属性来验证对象的属性，如下所示：

let tjanster = await tjansterRes.json();

let personId = 64; // or whatever constant you want
if(typeof tjanster !== 'undefined'
  && tjanster.hasOwnProperty('acf')
  && tjanster.acf.hasOwnProperty('person')
  && tjanster.acf.person.length > 0
  && tjanster.acf.person[0].hasOwnProperty('ID')
  && !isNaN(tjanster.acf.person[0].ID)){
    personId = tjanster.acf.person[0].ID;
}

然后您可以验证该值是否不同于常量：

if(personId === 64){
  return; // prevent call to your api
}

let personRes = await fetch(
    `${Config.apiUrl}/wp-json/wp/v2/person/${personId}`
);
let person = await personRes.json();

return { tjanster, person };

这样做的问题：

if (tjanster.acf.person[0] === undefined) {
    let personId = 64;
} else {
    let personId = tjanster.acf.person[0].ID; 
}

如果未定义tjanster.acf，那么您将得到一个未被处理的异常，因为将从一个未定义的对象调用属性person。如果未定义tjanster.acf.person，则会发生同样的情况，然后tjanster.acf.person[0]会引发异常。

Answer 2

您可以通过短路来实现此目的，或者制作一个函数来处理id

例如，发生短路：

${Config.apiUrl}/wp-json/wp/v2/person/${personId || "STATIC_ID"}`

或创建一个函数，以便您可以在字符串插值内调用它

${Config.apiUrl}/wp-json/wp/v2/person/${handleId(personId)}`

尝试管理从API获取的未定义值-React

2 个答案: