setState が上手くできない

前提・実現したいこと

一秒ごとにデータを配列に格納し、それをReactでApexChartsを使ってリアルタイムにデータを更新する折れ線グラフを描画するプログラムを組んでいます
(damy_hairetuを18人のデータとし、それを1秒ごとに,1つずつ対応するsetState.series[i].data[]に格納したい)

実際に表示させてみると、データを配列に格納するプログラム(setState)が上手く動きません.
console.logでデータの内容を確認してみたところ、正常に?表示されるので、値が存在しないという事はないかと思います。

分かりづらくて申し訳ないです。
どのようにすればエラーを解消できるでしょうか?
ご教授お願い致します。

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

Cannot read properties of undefined (reading 'setState') at updatehairetu (App.js:139:1) at App.js:126:1

該当のソースコード

import React, { useState, } from "react"; // import RealtimeLineChart from "./RealtimeLineChart"; import Chart from "react-apexcharts"; const TIME_RANGE_IN_MILLISECONDS = 30 * 1000; const ADDING_DATA_INTERVAL_IN_MILLISECONDS = 1000; const ADDING_DATA_RATIO = 0.8; let count=0; export default () => { const nameList = ["1", "2", "3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"]; //18 const [state, setState] = useState({ options: { chart: { id: "basic-bar", }, xaxis: { }, }, series: [ { name: "1", data: [], }, { name: "2", data: [], }, { name: "3", data: [], }, { name: "4", data: [], }, { name: "5", data: [], }, { name: "6", data: [], }, { name: "7", data: [], }, { name: "8", data: [], }, { name: "9", data: [], }, { name: "10", data: [], }, { name: "11", data: [], }, { name: "12", data: [], }, { name: "13", data: [], }, { name: "14", data: [], }, { name: "15", data: [], }, { name: "16", data: [], }, { name: "17", data: [], }, { name: "18", data: [], }, ], }); React.useEffect(() => { const interval = setInterval(() => { for(var i=0;i<nameList.length;i++){ if(damy_hairetu[i].length>count){ // state.series[i].data.push(damy_hairetu[i][count]) updatehairetu(i); } } // console.log(state.series[5].data); count++ // console.log(count) }, ADDING_DATA_INTERVAL_IN_MILLISECONDS); return () => clearInterval(interval); }); const updatehairetu = (i) =>{ this.setState(...state.series[i].data,damy_hairetu[i][count]); }; const damy_hairetu=[ [5,4,3,2,1,0], [4,5,3,2,3,4,5,4,3,2,1,0], [3,2,1,0], [5,3,4,2,1,4,5,2,3,2,4,5,2,3,2,1,4,5,2,1,4,3,2,1,3,5,1,2,4,2,3,1,1], [1,2,3,4,5,2,1,0], [3,2,3,5,1,4,2,4,1,3,5,1,2,3,0], [2,3,2,3,2,3,2,3,2,3,2,2,4,2,1,2,4,5,1,4,2,3,1,5,2,4,2,5,3,1,5,2,4,3,5], [2,1,4,5,2,1,4,3,2,1,0], [2,3,2,3,2,2,4,2,1,0], [5,1,2,2,2,3,0], [5,4,3,5,1,3,2,2,0], [3,1,2,3,3,1,0], [4,2,2,3,2,2,1,0], [3,1,4,1,2,0], [4,3,3,2,1,0], [5,3,4,3,4,5,2,4,3,2,1,5,1,4,2,3,4,1,5,3,2,1,4,2,3,5,1,2,4,1,4,2,3,4,1,3], [4,2,3,4,1,5,3,2,1,0], [4,2,3,5,1,2,4,1,0] ] return ( <div> <Chart options={state.options} series={state.series} type="line" width="450" /> </div> ); };

コメントを投稿

0 コメント