ReactとamCharts、ボタンクリックをしても配列を追加できない

Question

前提・実現したいこと

ReactにチャートライブラリamChartsの導入をしています。その上で、テキストtypeのinputタグに配列のアルファベット（配列データのcategoryに当たる部分）を入力し、ボタンtypeのinputタグをクリックした時に配列データを追加できるようにしたいのですが、なぜか追加されません。（クリックイベントはaddData)
原因は何でしょうか、
ご回答よろしくお願いします。

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

エラーメッセージ

該当のソースコード

ソースコード
import React, { useLayoutEffect, useRef } from "react";
import { useState } from "react";
import * as am4charts from "@amcharts/amcharts4/charts";
import * as am4core from "@amcharts/amcharts4/core";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

function GanttChart ()  {

  const divRef = useRef(am4charts.XYChart);
  const chartRef = useRef(HTMLDivElement);
  const chartData = [
    {
      category: "A",
      id:"1",
      start: 1609462800000, // 2021-01-01 10:00:00
      end: 1609466400000 // 2021-01-01 11:00:00
    },
    {
      category: "B",
      id:"2",
      start: 1609473600000, // 2021-01-01 13:00:00
      end:   1609491600000 // 2021-01-01 14:00:00
    },
    {
      category: "C",
      id:"3",
      start: 1609473600000, // 2021-01-01 13:00:00
      end:   1609491600000 // 2021-01-01 14:00:00
    }
  ];

  const [data, changeData] = useState(chartData);

  const addData = () => {
    let value = document.getElementById("text").value;
    if(value === "") return;
    let next = data.length + 1;
    changeData(todos => [...todos, { id: next ,category: value}]);
    console.log(next);
    console.log(value);
    console.log(chartData);
  };

  useLayoutEffect(() => {
    if (divRef.current) {
      const chart = am4core.create(divRef.current, am4charts.XYChart);
      chart.height = 500;
      chart.paddingTop = 0;
      chart.paddingBottom = 0;
      chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
      chart.data = chartData;
      

      const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.extraMin = 0.1;
      dateAxis.extraMax = 0.1;
        dateAxis.renderer.labels.template.location = 0.0001;

      const categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
      categoryAxis.dataFields.category = "category";
      categoryAxis.renderer.grid.template.location = 0;
      categoryAxis.renderer.inversed = true;

      const series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.openDateX = "start";
      series.dataFields.dateX = "end";
      series.dataFields.categoryY = "category";
      series.columns.template.tooltipText =　"category: {category} \n 開始: {openDateX} \n 終了: {dateX}";
      series.columns.template.tooltipPosition = "pointer";

      const scrollbar = new am4charts.XYChartScrollbar();
      chart.scrollbarX = scrollbar;
      scrollbar.series.push(series);

      chart.cursor = new am4charts.XYCursor();
      chart.scrollbarX = new am4core.Scrollbar();
      chart.scrollbarY = new am4core.Scrollbar();
      chart.plotContainer.events.on("doublehit", () =>
      dateAxis.zoom({ start: 0, end: 1 })
      );
      

      chartRef.current = chart;

      return () => chart.dispose();
      
    }
  }, [chartData]);


// useLayoutEffect(() => {
  
// }, [props.paddingRight]);

  return (
    <div>
      <div ref={divRef} style={{ height: 500, width: "85%"}} >
      </div>
      
      <input type="text" id="text"></input>
      <input type="button" onClick={addData}></input>
    </div>
  )
};

export default GanttChart

試したこと

addDataの中の”changeData(todos => [...todos, { id: next ,category: value}]);”を”changeData(data.concat({ id: next ,category: value}));”に変えて試したりもしましたが同じ結果になりました。

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

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

Comments

[FKM]

value = document.getElementById("text").value
この部分に対してvalueはちゃんと返ってきてますか？

[vivian]

ご回答ありがとうございます！
console.log(value)で確認しましたがそこにはしっかりと入力したものが返ってきました。

Answer 1

ReactはgetElementByIdは普通の方法では取得できません。したがって、valueを何も取得していない状態なので処理を中断(return)してしまいます。

Reactで、このように入力テキストと送信イベントの場所が異なる場合は、useStateフックを利用して以下のように対応します。

  import React, { useLayoutEffect, useRef,useState } from "react";
  const [val,setVal] = useState('')
  const addData = () => {
    let value = val //id="text"から取得した値
    if(value === "") return;
    let next = data.length + 1;
    changeData(todos => [...todos, { id: next ,category: value}]);
    console.log(next);
    console.log(value);
    console.log(chartData);
  };
/*中略*/

      <input type="text" id="text" onChange={(e)=>{setVal(e.target.value)} } value={val} />
      <input type="button" onClick={addData} />

Comments

[vivian]

ご回答ありがとうございます！
ご回答してくださったコードをそのまま入力してみましたが、結果として前と同じように配列の追加がうまくいきませんでした、、、
何か他に原因がありますでしょうか、、、！

[FKM]

valueは取得できているのでしょうか？

[vivian]

ご回答ありがとうございます！
console.log(value)で確認しましたがそこにはしっかりと入力したものが返ってきました。

[FKM]

オブジェクトのリアクティブ処理も変な気がします。基本オブジェクトで同期を取りたい場合

const [hoge,setHoge] = useState([])
setHoge(同期を取りたいオブジェクトの値)

こうなるはずです。

changeData(todos => [...todos, { id: next ,category: value}]);
となっていますが、todosはどこから出てきたオブジェクトなんでしょうか？

[vivian]

大変失礼いたしました、、、！ありがとうございます！
自分が参考にしていた資料と同じような書き方をしてしまいました、
以下のようにリトライしてみました、結果は同じでした、、、。
const [data, changeData] = useState(chartData);
changeData(data => [...data, { id: next ,category: value}]);

[FKM]

その関数実行後のdataがどんな風に代入されているか確かめてみては？
多分自分の記憶では書き方が違う気が…

[vivian]

ありがとうございます！もう少し確かめながら進めてみます！