react-chartjs-2で2つのグラフを反映する際、useSelectorで各データの情報を取得できているのに何故か2個のデータがくっついて前週のデータのみグラフに表示された。
Javascript
//...
const week_info = useSelector((state) => state.oneWeekDots); //今週の勉強時間
//[3, 0, 0, 3, 0, 5, 0]
const lastweek_info = useSelector((state) => state.lastWeekDots); //前週の勉強時間
//[0, 0, 6, 0, 0, 0, 2.5]
return (
//省略
<Line
data={{
//...
datasets: [
{
label: " # 今週の学習状況 ",
data: week_info,
//...
},
{
label: " # 前週の学習状況",
data: lastweek_info,
},
//...
そこで変数week_info/lastweek_infoを空配列にスプレッド構文で展開して、変数
week_info_array/lastweek_info_arrayをグラフに与えたら反映された
Javascript
//...
const week_info_array = [...week_info]
const lastweek_info_array = [...lastweek_info_array]
return (
//...
<Line
data={{
//...
datasets: [
{
label: " # 今週の学習状況 ",
data: week_info_array,
//...
},
{
label: " # 前週の学習状況",
data: lastweek_info_array,
},
//...
react-chartjs-2のライブラリは、配列型の数値だと読み取ってくれるが、なぜスプレッド構文で展開した状態だと読み取ってくれるかは解決しなかった。まだまだ精進しないといけない。