useState()の初期値をどう設定すればよいかわからない

Question

実現したいこと

axios.get()で持ってきたデータをsetStateしたい

コード

import React, { useEffect, useState } from 'react';

function App() {
    [data, setData] = useState([]);

    useEffect(
         () => {
             const get = async () => {
                 const result = await getData(); //getData()は他ファイルにある関数群で動作確認済みです.
                 setState(result.data);
             }
             get();
        },
        []
    )

return (
 // 省略
)


}

export default App;

うまくいかないこと

持ってきたデータがObject型でその中にある配列のみをsetStateしたいのですが

Error: Objects are not valid as a React child (found: object with keys []). If you meant to render a collection of children, use an array instead.

というエラーが出てしまう.
レスポンスのデータは以下のような感じです

{
 data: [
        {hoge: "hoge", huga: "huga"},
        {hoge: "foo", huga: "foo"},
       ]
}

試したこと

• console.log(typeof(result.data))をするとArrayとでます
• Objectをstringに変換してuseStateの初期値を""にするとちゃんと格納されることは確認したのですが、そのままObjectとして格納するとエラーになります。

よろしくお願いします.

Answer 1

Error: Objects are not valid as a React child (found: object with keys []). If you meant to render a collection of children, use an array instead.

このエラーはオブジェクトをrenderしようとして発生していると思うので、ソース中のreturn内で省略されている箇所の書き方が違うのだと思います。
※推測ですが直接{data}のように書いている？

dataは配列という前提のもとで話を進めますが、例えば以下のようにすれば表示されませんか？

data?.map((d, index) => {
  return (
    <p key={`data_${index}`}>{d?.hoge}</p>
  );
})

Comments

[butsuli_shine]

配列をそのまま書いていました
そちらの書き方で表示をしたら動きました.
自分が思っていたところと全く別のところが問題だったのですね...
まだまだ未熟だと痛感しました
ありがとうございました