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

Question

前提・実現したいこと

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

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

TypeError: sakeList.map is not a function

該当のソースコード

const AllSake = () => {
  const [sakeList, setSakeList] = useState(null);
  useEffect(() => {
    axios.get(`http://127.0.0.1:5000/`)
      .then(res => {
        setSakeList(res.data)
        console.log(sakeList)
      })
  }, [])

  return (
    <React.Fragment>
      <h1>一覧</h1>
      <button onClick={() => handleLink('/input')}>入力画面に</button>
      <ul>
        {
          sakeList === null ? <p>リストがありません</p> :
          sakeList.map(sake => {
            return (
              <li key={sake.id}>
                <p>{sake.name}</p>
              </li>
            )
          })
        }
      </ul>

    </React.Fragment>
  )
}

@app.route("/", methods=['GET', 'POST'])
def index():
    with get_connection() as conn:
        with conn.cursor() as cur:
        if request.method == 'GET':
                cur.execute('SELECT to_json(test) FROM test')
                result_list = cur.fetchall()
                result_dic = {}
                count = 0
                for result in result_list:
                    for s in result:
                        result_dic[count] = s
                        count += 1
                return jsonify(result_dic)

Answer 1

問題を認識するには

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

1. TypeError: sakeList.map is not a functionが何を意味するか
2. res.dataは実体として何が返ってきているか
3. 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文字列に変換したものをレスポンスとして返しています。

                result_dic = {}  # <== dict型
                count = 0
                for result in result_list:
                    for s in result:
                        result_dic[count] = s
                        count += 1
                return jsonify(result_dic)

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

まとめると

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

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

解決概要

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

APIの内容に揃える

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

Reactの振る舞いに揃える

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

Comments

[退会済みユーザー]

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

Answer 2

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

// const [sakeList, setSakeList] = useState(null);
const [sakeList, setSakeList] = useState([]);

// sakeList === null ? <p>リストがありません</p> :
sakeList.length === 0 ? <p>リストがありません</p> :

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご指摘の箇所を変更しましたが、同じエラーが出ました。
undefinedでも試しましたが期待通りの結果を得られません。

[p19ljk]

別の方が回答してくれてますが、pythonからのレスポンスがどうなっているか教えていただけますか？
sakeListというstate名だったのでてっきり配列型だと勝手に認識していましたが、res.dataはObject型で連想配列になっているのではないですかね。

[退会済みユーザー]

ご指摘の通り、res.dataがObject型になっていました。
attakeiさんのご指摘にある通り、ちぐはぐになっておりました。
python側でデータの整形を行おうと思います。