【React18.2.0】ビルド後にのみ1度だけsetStateが動作する/レンダリングが動作する

Question

実現したいこと

以下を解決したいです。
axiosを使ったほかの表描画コンポーネントでは遭遇したことのない状況で、申し訳ありませんがご存じでしたらご教示いただけますと幸いです。

• ビルド後に1度だけsetStateが正常に動作する　←ここが特によくわからないです。
• コンポーネント(JSX.Element)のrender();部分を削除してビルド→エラー→再度render();追加してビルド成功した後にのみ上記stateをデータとして使った表のレンダリングが1度だけ動作する

前提

• React(18.2.0)+TypeScriptでWebAPIからaxiosで取得したJSONデータをstateに保持し表データとしてレンダリングしたいと考えています。
• 表の描画には、react-spreadsheet-grid(2.3.1)を使用します。

上記実現のため、ここでは一つのコンポーネントで以下を実装します。

• useEffectによりコンポーネントの初期化時にaxiosでJSONデータを取得
• 上記で取得したJSONデータからカラム情報を取得+setStateしてstateをreact-spreadsheet-gridの<DataSheetGrid/>propsに渡し表をレンダリング

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

以下２つの問題に直面しています。

（１）ビルド後にのみsetStateが動作する
ビルド後1度目のレンダリング時のみsetStateが正常に動作します。
以降、リロードやルーティング、ブラウザを落とすなどコンポーネントをアンマウントして、再度レンダリング(マウント)してもsetStateが更新されなくなる。

（２）ソースファイル(.tsx)のコンポーネントのrender();部分をクリップボードコピー後削除して一度保存→ホットリロードでビルド→ブラウザエラーが出る→削除したrender();部分を同じ箇所にペースト追加して再度保存→ホットリロードでビルド→最初の一度目のマウント時のみsetStateの内容がレンダリングされる
→二度目以降の再レンダリング(再マウント)時は（１）と同じ

該当のソースコード

import { useEffect, useState } from 'react'
import axios, { AxiosResponse } from 'axios'
import {
    DataSheetGrid,
    keyColumn,
    textColumn,
  } from 'react-datasheet-grid'
  import 'react-datasheet-grid/dist/style.css'
  
  export const MySpreadGridTest=()=> {
        const [data,setData] = useState([])
        const [columns,setColumns] = useState<any[]>([])
        const [ loading, setLoading ] = useState(true);
        const column:any[] = [];
        let ignore = false;

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

        useEffect(() => {
          if (!loading) {
            return;
          }
          const newColumns = columns.slice(0, columns.length);
          setColumns((prev)=>[...newColumns]);
          setLoading(false);
        }, [columns]);
      
        const fetchData = async () => {
          try {
            const response = await axios.get('http://endopoint:5000');
            if(!ignore){
            setData(response.data);
              if (response.data.length > 0) {
                Object.keys(response.data[0]).map((key,index)=>{
                  column.push({
                      ...keyColumn(key, textColumn),
                      title: key
                  })
                })
              
              const newColumns = column.slice(0, column.length);
              setColumns((prev)=>[prev,...newColumns]);
             
            }
            }
          } catch (error) {
            console.error('Error fetching data: ', error);
          }
          ignore = true;
        };

        // ↓ここを削除してビルド→エラー→再度追加してビルド→レンダリングが上手くいく
        return (
          <DataSheetGrid
            value={data}
            onChange={setData}
            columns={columns}
          />
        )
      }

試したこと

・<React.StrictMode>をコメントアウト
・2回setStateするよう工夫↓

 useEffect(() => {
          if (!loading) {
            return;
          }
          const newColumns = columns.slice(0, columns.length);
          setColumns((prev)=>[...newColumns]);
          setLoading(false);
        }, [columns]);

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

・ブラウザはchrome, EDGEで試しました。
各種バージョンは以下です。
・typescript: "^4.9.5"
・axios: "^1.6.2",
・react: "^18.2.0",
・Windows
・VSCode使用

Comments

[_ui_luz]

追記です。
React Developer Toolsで試しに確認したところ、以下のエラーでした。たぶん、一意のkeyが存在しないか、keyの重複がありレンダリングできていないという仮説です。
Uncaught Error: Children cannot be added or removed during a reorder operation.

ただ、ではなぜ同じデータで同じOrderでレンダリングできるパターンがあるのかが疑問です。
引き続き調査しますが、Reactにはiterateするデータに一意のkeyが必要なことは存じ上げていますが、
Dynamicなデータに対してどのようにして一意のkeyを決めるのか知識不足で分かっていません。

[kuboon]

grid に value と columsがありますが、更新したいのはvalue だけですか？

[_ui_luz]

情報が欠如していてすみません。
columnsもです。
valueは毎回stateが更新されるのに対し、columnsは2回目以降更新されないため、頭を悩ませています…

Answer 1

2つ目の useEffect はおかしいですね。
まず、依存リストに loading が必要です。

また、コード全体を見て、 loading は一度 false になった後 true にならなそうに見えます。そうすると1行目で return しますから setColumn は実行されませんね。

「試した事」にある、「2回setStateするよう工夫」は意味がわかりません。どこが2回？

Comments

[_ui_luz]

ご回答ありがとうございます。
＞「試した事」にある、「2回setStateするよう工夫」は意味がわかりません。どこが2回？
コンポーネントの最初のレンダリング時に1度だけ2回setColumnsしています。"fetchData"のsetColumns((prev)=>[prev,...newColumns]);で1回、ここでcolumnsが更新されるので2つ目のuseEffectが呼ばれます。stateは即時反映されないので、2つ目のuseEffectで、初期値"true"のloadingにより1行目のreturnには入らず、setColumns((prev)=>[...newColumns]);で2回目のsetColumnsをしています。なぜこれをしたかというと、stateの更新は即時でなく、関数呼び出しなどのあとに更新されるため、二重でsetする試みをしたのですが余計無駄だったようです。ロジックそのものが無駄であることと、もともと1回目からcolumnsが更新されないので2回目のuseEffectは発火しないと思います…

＞コード全体を見て、 loading は一度 false になった後 true にならなそうに見えます。
わざとそうしています。二度trueにならない=二度通らないようにしています。コンポーネントのレンダリング時に上記2度のsetColumnsによりcolumnsの値はaxiosで取得しObject.keyでmapした値に更新されます。
最初のaxiosで取得した値のみ使い回したいため、最初の一度だけ2回のsetColumnsでcolumnsの値を確定し、その確定した値を取り回して表のデータとして使いたいため、その後のaxiosやcolumnsの更新での2回目のuseEffectが走らないようにしています。

[_ui_luz]

ご回答ありがとうございました。
これまでいただいた知見から解決することができました。
結局、setStateのやり方が良くなかったようで、あまり納得していませんが以下のようにすることで解決しました。
誠にありがとうございました。

【変更後】
import { useEffect, useState } from 'react';
import axios from 'axios';
import { Column, DataSheetGrid, keyColumn, textColumn } from 'react-datasheet-grid';
import 'react-datasheet-grid/dist/style.css';

type DynamicData = {
[key: string]: string | number;
};

export const MySpreadGridTest = () => {
const [data, setData] = useState<DynamicData[]>([]);
const [columns, setColumns] = useState<Column[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('http://endpoint');
console.log("fetchStart!!!")
setData(response.data);

if (response.data.length > 0) {
const newColumns = Object.keys(response.data[0]).map((key, index) => ({
...keyColumn(key, textColumn),
title: key,
}));

setColumns(newColumns);
console.log("columns:", newColumns);
console.log("columns(str):", JSON.stringify(newColumns));
}

setLoading(false);
} catch (error) {
console.error('Error fetching data: ', error);
setError('Error fetching data. Please try again.');
setLoading(false);
}
};

fetchData();

}, []);

if (loading) {

return <div>Loading...</div>;
}

if (error) {

return <div>Error: {error}</div>;
}

return (
<DataSheetGrid
value={data}
onChange={setData}
columns={columns}
/>
);
};

[kuboon]

コードブロックが読みづらいので囲ってもらえると助かるのですが。。