Не удается заставить WordPress API работать с React

Question

Во-первых, спасибо за любую помощь. Я новичок в React и пришел из PHP / Wordpress фона.

Я пытаюсь добавить элементы из вызова API WordPress в состояние, но когда я пытаюсь получить доступ к информации из вызова API это продолжает давать мне ошибки неопределенных.

Вот мой код, надеюсь, кто-то уже имел дело с этим и может помочь.

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useState } from 'react'

//Templates
import App from '../App';


class FaqPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            faqs: []
        };
    }

    componentDidMount() {
        fetch("https://starcsystems.com/wp-json/wp/v2/pages/12844")
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    faqs: result.faqs
                });
                console.log(result);
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.


            (error) => {
                this.setState({
                    isLoaded: true,
                    error
                });
            }
        )
    }

    render() {
        const { error, isLoaded, faqs } = this.state;
        if (error) {
        return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
        return <div>Loading...</div>;
        } else {
        return (
            <div>
                <p>Value Run</p>
                <ul>
                    <li>{this.state.faqs.id}</li>
                </ul>
                <p>Value After Run</p>
            </div>
        );
        }
    }
}

export default FaqPanel;

Answer 1

Спасибо, Нирадж! В итоге я реализовал его, и это хорошая проверка, чтобы не потерпеть неудачу всей программы. Вы правы, что faqs не работает правильно, потому что его нет в запрашиваемых данных. Я поместил этот URL-адрес в качестве заполнителя, потому что я на самом деле занимаюсь разработкой на своем локальном компьютере и не мог придумать способ показать данные.

Я не могу отобразить данные из массива всякий раз, когда я пытаюсь использовать карту, она выдает ошибку faqs.map - это не функция.

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useState } from 'react'

//Templates
import App from '../App';


class FaqPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            faqs: []
        };
    }

    componentDidMount() {
        fetch("/wp-react-mgb/wp-json/wp/v2/pages/9")
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    faqs: result
                });
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.


            (error) => {
                this.setState({
                    isLoaded: true,
                    error
                });
            }
        )
    }

    render() {

        const { error, isLoaded, faqs } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Loading...</div>;
        } else {
            return (

                <div>
                    <p>Value Run</p>
                    {console.log('this is the faqs')}
                    {console.log(faqs)}
                    <p>{this.state.faqs && this.state.faqs.acf.modified_gmt}</p>
                    {/* {faqs.map(function(faq, index) {
                        return <li>{faq.faq_question[index]}</li>;
                    })} */}

                    {faqs.map(function (value, index) {
                        return <p key={index}>{value}</p>
                    })}
                    <p>Value After Run</p>
                </div>
            );
        }
    }
}

export default FaqPanel;

Это весь мой новый код, а ниже - console.log для результата из API позвоните.

Еще раз спасибо за взгляд, это очень ценится! -Darrel

введите описание изображения здесь

Answer 2

В качестве ключа данных нет faqs .

 (result) => {
      this.setState({
        isLoaded: true,
        faqs: result <---- Just put it like this
  });

Просто чтобы убедиться, что вы не получите ошибку типа.

<ul>
  <li>{this.state.faqs && this.state.faqs.id}</li>
</ul>