React.js axiosで取得したデータを画面に表示したい

Question

実現したいこと

React.jsとDjangoをdjangorestframeworkで連携させ、
REST APIで取得したデータを画面に表示したいと思っています。
APIのコールはaxiosを使っています。

発生している問題・エラーメッセージ

データの取得自体はconsole.logで確認すると成功しているのですが、return内で{ themes }としても、画面に出力することができません。変数undefinedになってしまいます。

Line 45:11:  'themes' is not defined

該当のソースコード

list.jsx

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

import Header from "./header";
import Footer from "./footer";

const List = () => {

    axios.get('http://127.0.0.1:8000/y_line_game_app/theme').then((response) => {
      const themes = response.data;
      console.log(themes);

    return (
      <div className="App">
      <Header />
      <Link to="/register">お題登録</Link>
        <h1>お題一覧</h1>

        <ul>
        { themes }
        {/* { themes.map(theme => <li>{theme.theme_title}</li>)} */}
      </ul>

        <Footer />
      </div>
    );
  }
  
  export default List;

補足情報（FW/ツールのバージョンなど）

react@18.2.0
axios@0.27.2

実装はこちらのページを参考に、より原始的な形で書いてみました。
https://www.freecodecamp.org/japanese/news/how-to-use-axios-with-react/#get-

よろしくお願いいたします。

Answer 1

実装はこちらのページを参考に、より原始的な形で書いてみました。

とのことで挙げられているリンク先のコードでは、useState() や useEffect() を使っていますが質問にあるList() ではこれらを(importはしていますが）使っていないので、これらを使うように修正していくとよいでしょう。

Comments

[circular2016]

ありがとうございます。

昨日、useState,useEffectを使ってやってみても同じくundefinedだったのですが、本日書き直して実行してみたところ、うまくいきました。
どこかでタイプミスがあったのかもしれません。。。