【React】WP APIを呼び出し

AXIOSを使うと

APIに接続して、情報をJSON(ほぼテキスト)で取れるので、読み込み時間がめっちゃ少なくなる=サイトが早くなる！

やり方

手順1

コンポーネント、indexどのファイルでもいいのでaxiosを使うページで下記を書いてリアクトからaxiosを読み込み

    
import React, { useEffect, useState } from 'react';
import axios from 'axios';
    

手順2

こんな感じで、AXIOSを呼び出す、URLに自分の取りたいWPのAPIパスを入力

    
import React, { useEffect, useState } from 'react';
import axios from 'axios';


export default function Posts() {
    const [posts, setPosts] = useState([]);
    const [isLoading, setIsLoading] = useState(true);


    useEffect(() => {
        const URL = 'wpのAPのIURL'
        axios.get(URL)
            .then(res => {
                setPosts(res.data)
                setIsLoading(false)
            })
    }, [])
}
    

手順3

returnの中で、出力する情報を指定して呼び出す。

    

JSONの情報を確認しながら呼びたい情報をmap関数を使って出力できる

{posts.map((post, index) => (
{post.title.rendered}
))}


post.情報.(rendered) → 情報の部分が変える場所。
https://ドメイン/wp-json/　　で中身を見れる。