初めに
フロントエンドの勉強をしたいと思い、ReactとTypeScriptを用いて家計簿アプリを作りながら学んでいたところ、グラフの描画で詰まった部分のメモを残す。
詰まったこと
React-Chart-JS2を用いてグラフ描画を行おうとしたところ、そもそも初期化の時点でエラーが発生。
ネットで色々調べながらやったがうまくいかず。
export const PiePlot: React.FC = () => {
const [pie_data, setPieData] = useState({}) // ここがダメだった
...
useEffect(() => {
// APIをコールしてデータを取得
...
setPieData(pie_data)
}, [])
return(
<div className="graph-area">
<Pie data={pie_data} />
</div>
)
}
useStateで初期化しているpie_dataに初めからの{}をわたし、その後useEffect実行時にAPIから取得したデータをpie_dataにセットして描画を試みていた。
結論
結論として初期化の際に空の{}をわたしたのが良くなかった。
useEffectはライフルサイクルで見ると初め(初期化の際)はレンダリング後に実行される。
そのため、{}を渡すと
<Pie data={pie_data} />
は本来必要とするdatasets、labelsなどの要素を読み取れない。
そのため以下のように初期化を行うことで解決できた。
export const PiePlot: React.FC = () => {
const [pie_data, setPieData] = useState({
labels: [],
datasets: []
}) // こうすることで解決した
...
useEffect(() => {
// APIをコールしてデータを取得
...
setPieData(pie_data)
}, [])
return(
<div className="graph-area">
<Pie data={pie_data} />
</div>
)
}
まとめ
今回はReact-Chart-JS2を用いてグラフを描画する際に詰まったことをメモした。
結論として初期化する記述が間違っていたことが問題であり、初めから読み取る部分をいれ、それらが持つ要素を空にして、初期化することで解決した。
しかしレンダリングの後でuseEffectを実行するので一瞬空の状態の描画が描画がうつるときがある。
その部分についても解決していきたい。
追記
今回勉強のために作成した家計簿アプリのGitHubのリンクを以下に記載します。
コードのレビューでもなんでも本記事のコメントに記載していただけると幸いです。
学びにつながり、自身のモチベーションにもつながります。
よろしくお願い致します。