pythonからデータを取得してreactで表示したい

前提・実現したいこと

Pythonからデータを取得してReactで表示させたいです。
useEffectを使って初期表示のためのデータを取得したいのですが、consoleで確認すると値が取得できていません。
解決方法がわからないため、どなたか教えていただけると助かります。
初めての投稿のため至らぬところもあるかと思います。そちらもご指摘していただけると幸いです。

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

TypeError: sakeList.map is not a function

該当のソースコード

React
1const AllSake = () => {
2  const [sakeList, setSakeList] = useState(null);
3  useEffect(() => {
4    axios.get(`http://127.0.0.1:5000/`)
5      .then(res => {
6        setSakeList(res.data)
7        console.log(sakeList)
8      })
9  }, [])
10
11  return (
12    <React.Fragment>
13      <h1>一覧</h1>
14      <button onClick={() => handleLink('/input')}>入力画面に</button>
15      <ul>
16        {
17          sakeList === null ? <p>リストがありません</p> :
18          sakeList.map(sake => {
19            return (
20              <li key={sake.id}>
21                <p>{sake.name}</p>
22              </li>
23            )
24          })
25        }
26      </ul>
27
28    </React.Fragment>
29  )
30}

Python
1@app.route("/", methods=['GET', 'POST'])
2def index():
3    with get_connection() as conn:
4        with conn.cursor() as cur:
5        if request.method == 'GET':
6                cur.execute('SELECT to_json(test) FROM test')
7                result_list = cur.fetchall()
8                result_dic = {}
9                count = 0
10                for result in result_list:
11                    for s in result:
12                        result_dic[count] = s
13                        count += 1
14                return jsonify(result_dic)

行動規範の内容に同意します

回答2件

ベストアンサー

問題を認識するには

問題の解決を進めるのであれば、まずは次の3点をきちんと認識する必要があります。

TypeError: sakeList.map is not a functionが何を意味するか
res.dataは実体として何が返ってきているか
APIのレスポンスは何か

1.について言えること

エラーメッセージの通り、sakeList.mapが関数になっていません。
つまり、sakeListは.mapなどを使うことを前提にした値になっていません。

コード内ではArrayを想定していると思いますが、おそらくsetSakeListを読んだ時点でObject（なおかつmapが使えない型）が入っています

2.について言えること

axios.getが返すresponseの形式はドキュメントで確認することができます。（もちろんconsole.log(res)を実行するのが手っ取り早いです）

axios自体はJSON文字列をオブジェクトにパースしてくれるのですが、変換されたres.dataが本当にsakeListにセットしたい値かを確認する必要があります。
（少なくともこの値がarrayなど.mapをメソッドとして持てない場合はエラーになるでしょう）

3.について言えること

質問文にはバックエンドのコードのみがあるため、事実としてどうなっているかはわかりませんが、
このAPIはdict型をJSON文字列に変換したものをレスポンスとして返しています。

python
1                result_dic = {}  # <== dict型
2                count = 0
3                for result in result_list:
4                    for s in result:
5                        result_dic[count] = s
6                        count += 1
7                return jsonify(result_dic)

つまりこの形式では、「countをキーにしてsを値に突っ込んだオブジェクト」になっており、リストになっていません。

まとめると

APIがレスポンスとして返している形式
レスポンスの内容についてのReact側での取り扱い

がちぐはぐになっているようにみえます。この扱い方を揃えることで解決すると思います。

解決概要

どちらに揃えるかは要件（どうしたいか）次第なので、それぞれどうアプローチしたら良いかの概要だけ載せておきます。

APIの内容に揃える

Objectの中身をListにするなどしてmapを使える形式にするなどが考えられます。
Object.entries()などを使うとObjectをArrayに変換する道筋が建てられそうです。

Reactの振る舞いに揃える

現状ではresult_dicを{}=dict型として内容を構築しています。
これを[]=list型を土台にした実装とすることでjsonifyの中身も配列ベースのJSON文字列になります。

投稿2021/07/03 12:15

attakei

総合スコア2740

退会済みユーザー

2021/07/05 03:05

ご回答ありがとうございます。 res.dataがObject型で返ってました。ご指摘の通り、APIからのレスポンスの形式とreactでの取り扱いがちぐはぐになっていました。 python側でデータの整形を行おうと思います。

行動規範の内容に同意します

stateの更新は非同期なため、setした直後に値を参照しても更新はされていません。
また、初期値をnullにしているのでmapがないと怒られます。
初期値nullにこだわらなければ、初期値を空配列([])にして判定をlengthに変更するのが良いかと思います。

js
1// const [sakeList, setSakeList] = useState(null);
2const [sakeList, setSakeList] = useState([]);
3
4// sakeList === null ? <p>リストがありません</p> :
5sakeList.length === 0 ? <p>リストがありません</p> :