Reactとrechartで株をグラフに描画する際にTypeError: Cannot read properties of undefined (reading 'map')エラー

Question

前提・実現したいこと

Reactとrechartで株をグラフに描画するものを作っています。

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

エラーメッセージ：TypeError: Cannot read properties of undefined (reading 'map')

該当のソースコード

import {Line} from "react-chartjs-2";
import axios from 'axios';
import React,{ useState, useEffect } from 'react';

export default function Chart() {
    const URL = "http://api.marketstack.com/v1/eod";
    const API_KEY = "####";
    const [stockData, setStockData] = useState({});
    const options = {
        legend:{
          display:false,
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }],
        },
      }   

    useEffect(() => {
        const getStockData = async (symbol) => {
            const data = [];
            const labels = [];
            await axios.get(`${URL}?access_key=${API_KEY}&symbols=${symbol}&date_from=2020-11-17&date_to=2020-12-16&sort=ASC`)
                .then(response => {
                    for ( const stock of response.data.data  ){
                        data.push(stock.close)
                        labels.push(stock.date)
                    }
            });
            setStockData({
                labels: labels,
                datasets:[
                    {
                        borderColor: 'rgba(35,200,153,1)',
                        data: data,
                        lineTension: 0,
                    }
                ]
            })
            }
            getStockData('TSLA');
    },[]);

    

    return (
        <div className="chart">
              <Line data={stockData} options={options}/>
        </div>
    )
}

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Answer 1

エラーメッセージを直訳すると、「undefinedのプロパティを読むことができません（mapを読んでいます）」ですね。つまりどこかのコードでundefinedもしくはundefinedが代入されている変数からmap関数を呼び出そうとしているということになります。

掲載してもらったプログラムをみてみると、どこにもmapを使っている箇所が見当たりません。
つまり、このプログラム以外のところでエラーが発生していることになります。
mapは配列のプロパティなので、配列を関数やコンポーネントに渡しているところが怪しそうです。そう考えると一番怪しいのはLineコンポーネントですね。Lineコンポーネントで描画するグラフのデータは配列だし、それ以外(axios.get、setState, useEffect)はあまり配列を渡す必要はなさそうなので・・・

ここまで当たりをつけた上でコードを読んでみると、stockDataの初期値が空オブジェクト{}となっていることがわかります。多分これがエラーの原因なんだと思います。初回の描画の時だけ、stockData.datasetsは定義されていないからundefinedですね。

実際に確認して見ましょう。下記のようにreturnの前でconsole.logでstockDataを確認して見てください。多分、データが読み込まれるまではstockDataは{}になっていると思います。

    ...
    console.log(stockData)
    return (
        <div className="chart">
              <Line data={stockData} options={options}/>
        </div>
    )
}

だいぶ長々と書きましたが、対策としてはこんな感じで「データが読み込まれたらLineコンポーネントを描画する」ように修正すれば良さそうです。

import {Line} from "react-chartjs-2";
import axios from 'axios';
import React,{ useState, useEffect } from 'react';

export default function Chart() {
    const URL = "http://api.marketstack.com/v1/eod";
    const API_KEY = "####";
    const [stockData, setStockData] = useState(); // ★値が入っていない状態(stockDataはundefinedです)
    const options = {
        ...
      }   

    useEffect(() => {
        ...
    },[]);

    // stockData && <Line ... /> とすることで、stockDataが真になったらLineコンポーネントを描画するようにできます。
    // undefinedはfalseなのでstockDataが読み込まれるまでは<Lineコンポーネントが処理されることはないです
    return (
        <div className="chart">
              { stockData && <Line data={stockData} options={options}/>}
        </div>
    )
}