ReactでFlaskから配列を含むレスポンスを受け取る方法

Question

やりたいこと

Reactからのリクエストに対してFlaskから、配列を含むレスポンスを返したい。

詳細

Webアプリの勉強をしており、フロントエンド側をReact.js、バックエンド側をFlaskで進めていたところ、ReactとFlaskの連携で分からないことがありました。
調べているとReact側からリクエストを投げて、FlaskからのレスポンスはJSON形式で返すようなのですが、下記のように値がstringやintのものはよく見かけても、

{
 "name" : "Tanaka",
 "data" : 0
}

下記のように値が配列になっている記事が見つけられないです。

{
 "timeList" : ["2022/01/22 21:53:00", ....],
 "dataList" : [0, 1, ....]
}

このような場合、配列を適当なデリミタで結合して1つのstringとして返すのか、それとも配列のままでレスポンスを返して、React側でなにか解釈する方法があるのでしょうか。

バージョン

OS: Ubuntu 20.04 LTS
python: 3.8.5
flask: 2.0.2
npm: 8.1.2
node: 16.13.2

Comments

[hoshi-takanori]

配列もそのまま JSON になりますよ。

[minato_hy]

仰る通りでした……。
検索で出てこなかったのとリストも柔軟に変換してくれると思っていなかったため気づかなかったです。ありがとうございます。

Answer 1

特に気にせずリストを取り出せた。

  handleClick() {
    let newSeries: {name: string, data: Array<number>};
    let newCategories: Array<string> = [];
    let getItemName: string = "data1";
    let v: number = 0;
    axios
      .post('http://xxx.xx.x:xxxx/getData')
      .then(response => {
        newSeries = {name: getItemName, data: response.data.dataList};
        newCategories = response.data.timeList;
        this.setState({series: [newSeries]});
        this.setState({
          options: {
            ...this.state.options,
            xaxis: {
              ...this.state.options.xaxis,
              categories: newCategories
            }
          }
        })
      })
  }