axiosから取得したJSONオブジェクトから表コンポーネント(react-spreadsheet-grid)行を作成したい。

Question

実現したいこと

axiosから取得したJSONオブジェクト(バックエンドで.jsonファイルをjson.load(file)したもの)をReactで扱い、内容をレンダリングできるようにしたい。

前提

React+TypeScriptで開発を行っています。
react-spreadsheet-gridというライブラリでExcelライクな表画面を作成しています。
axiosで動的に取得したJSONオブジェクトから、列情報(column)、行情報(row)を取得しフロントエンドでレンダリングをしたいです。

列名(Colum)は、オブジェクトで定義します。基本的にその列オブジェクトをライブラリのコンポーネントの"column"プロパティに渡すと、列名がレンダリングされます。

以下の場合で①だと問題なくレンダリングされますが、
②の場合だとレンダリングがされません(何も表示されない)

①　行オブジェクトの定義をハードコーディングした場合
②　axiosでJSONオブジェクトを取得(response.data)して行情報の内容をマッピングして新しく作成したオブジェクトをコンポーネントのプロパティに渡した場合

該当のソースコード

以下の違いが判りません。はじめから定義したオブジェクトはレンダリングに反映されますが、配列に追加(push)したオブジェクトはレンダリングに反映されません。

レンダリング方法は一旦置いておいて、レンダリングに反映されないのはこの違いのせいだと考えていますが、調べても試行してもわからないためご存じでしたらご教示いただけますと幸いです。
なぜレンダリング方法はいったん置いておくかというと、どちらもconsole.logで直に確認すると[Onject Object]で、同じpopertyに対し一方はレンダリングされ、一方はされないので、Inputのオブジェクトの扱い方が悪いと考えました。

①はじめから定義(初期化)したオブジェクト(column)→レンダリングされる[Object Object]

const column:any[] = [{id:"1",title:"hoge"}];
…
<DataSheetGrid
            value={data}
            onChange={setData}
            columns={column}　←
 />

②pushで1つずつ追加したオブジェクト(column)→レンダリングされない[Object Object]

const column:any[] = [];

const response = await axios.get(endpoint)
Object.keys(response.data[0]).map((key,index)=>{
　column.push({id:index, title: key })
})

…
<DataSheetGrid
            value={data}
            onChange={setData}
            columns={column}　←
 />

試したこと

・JSON.stringify(res.data)
・setData(JSON.parse(JSON.stringify(res.data));

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

React
TypeScript
react-spreadsheet-grid

何卒よろしくお願いいたします。

Comments

[hoshi-takanori]

React では、配列の内容を書き換えるのではなく、新しい配列を作って state を更新する必要があります。
https://ja.react.dev/learn/updating-arrays-in-state

[_ui_luz]

ご回答ありがとうございます。
>新しい配列を作って state を更新する必要があります。
こちらについては存じ上げており、以下についても試しましたが、やはり動作していません。

```Typescript
const [colmns, setColumns]＝useState<any[]>([])
const response = await axios.get(endpoint)

Object.keys(response.data[0]).map((key,index)=>{
　setColumns(...colmns,{id:index, title: key })
})
```

もしくは

```Typescript
const [colmns, setColumns]＝useState<any[]>([])
const column:any[] = [];
const response = await axios.get(endpoint)
Object.keys(response.data[0]).map((key,index)=>{
　column.push({id:index, title: key })
})
setColumns(colmn);
```
useEffectで依存関係をcolumnsに持たせて変更時にconsole.logしていますが、値は格納されているようです。

console.log(columns) → [Object Object],[Object Object],..
console.log(JSON.stringify(colmns))→意図した構造と文字列

申し訳ありませんが引き続きよろしくお願いいたします。

[hoshi-takanori]

useEffect の使い方に問題がありそうですが、コードが断片的なので回答が難しいですね。
コンポーネント全体のコード（ビルドが通るなら多少省略されても構いませんが）をお示しください。
その際、コメント欄ではなく、質問を編集していただけれぼ幸いです。

Answer 1

お世話になっております。

すみません、やはりsetStateの更新の仕方に問題があったようです。
すでにstateとは別の配列を用意し、その配列で更新しているつもりでしたが、
さらに新しい配列にコピーした後、setStateに渡したところ、stateが更新されオブジェクトがレンダリングできるようになりました。

const [colmns, setColumns]＝useState<any[]>([]) 
var column:any[] = []; 
const response = await axios.get(endpoint) 
Object.keys(response.data[0]).map((key,index)=>{ 

    column.push({id:index, title: key }) ; 

}) 
const newcolum = column ; 
setColumns(newcolmn);

たくさんの閲覧、ご回答誠にありがとうございました。