ReactでJsonをブラウザに表示させたい。

Question

React typsescriptでAxiosを用いてAPIでJsonを取得することができました。
そのあとにどうしたらブラウザに表示したらいいのかわかりません。

import React from 'react';
import axios from 'axios';
 
export const ApiGet_Simple = (URL:string):any => {
    axios
        .get(URL)
        .then((results) => {
            console.log(results.data);
            return results.data;
        })
        .catch((error) => {
            console.log('通信失敗');
            console.log(error.status);
            return 
        });
};

ApiGet_Simple("http://localhost:8000/products/products/1/")
function App() {
    return (
        <div>
            test
        </div>
    )
}

export default App

ブラウザの開発ツールで

としたJsonを取得できたのですがコンソールではなくブラウザに表示させたいと思っています。

試したこと

<p>{ApiGet_Simple("http://localhost:8000/products/products/1/")}</p>

とやってみましたが表示できませんでした。

そのため

const data:any = ApiGet_Simple("http://localhost:8000/products/products/1/")

としたのですが、Undefinedになってしまい、表示することができませんでした。

バックエンドはDjango REST Frameworkで構築しています。

ご教示お願い致します。

Comments

[hoshi-takanori]

React で非同期処理は useEffect とか使うのが一般的かと。

[H-goto]

ありがとうございます。