Unhandled Rejection (TypeError)

Question

React初心者です。

Unhandled Rejection (TypeError): tests.map is not a functionが出て改善方法が分からず先に進めません。
Rails(API) + Reactを使ってコードを書いています。
一覧ページから遷移して遷移先のURLからIDを取得してRails側でデータを取ってきています。

material-uiなどのインポートなどはコードが長くなるので省略しています。

ここの記載が原因でしょうか？
ShowTest :React.FC<UserProps> = (props) => {

改善方法があればアドバイスお願いします。

type UserProps = RouteComponentProps<{
    id: string
   }>

interface getParams {
    id: number
    user_id: number
    title: string
    image: string
    body: string
}

const ShowTest :React.FC<UserProps> = (props) => { 

  //URLからid取得
   const initialId :number = Number(props.match.params.id)
   const [id,setId] = useState(initialId)

    const initialTests: getParams[] = []

    const [tests, setTests] = useState(initialTests)

    const get = async (id:number) => {
      const res = await getTest(id)
      console.log(res)
      setTests(res.data)
    }

        useEffect( () => {
            get(id)
        }, [setTests])

        return(
            <> 
 {
tests.map((test) => (
<Card className={classes.root} 
key={test.id}
>

<CardHeader
avatar={
 <Avatar aria-label="recipe" className={classes.avatar}>
   R
 </Avatar>
}               
title={test.title}
/> 
{/* <CardMedia
className={classes.media}
image="/static/images/cards/paella.jpg"
title="Paella dish"
/>  */}
<CardContent>
{test.body}
</CardContent> 
</Card>
))
}
</>
    )
}

Comments

[maisumakun]

画像が「status: OK」のものになっています。それなら特に問題ないのではないでしょうか？

[aaa11]

画像はreturnの中身をコメントアウトしてコンソールで表示した時の画像になりデータ自体は取れている事は確認できています。
returnの中身をコメントアウトを解除してページに遷移するとUnhandled Rejection (TypeError)で表示ができないようになっています。

Answer 1

想定しているデータ構造が正しくないだけではないでしょうか？

const [tests, setTests] = useState(initialTests)で初期設定しているinitialTestsは配列であるのに対して、画像で提示されているres.dataは単なるオブジェクトであって、配列ではありません。

Comments

[aaa11]

オブジェクトを配列に入れ直す必要があるという事ですか？

[maisumakun]

tests.mapを行っている以上は、testsに入るものが配列であることを想定されています。

そのまま配列に入れればいいか、別な形になるかは考慮が必要です。

[aaa11]

const [tests, setTests] = useState(initialTests)の記載をconst [tests, setTests] = useState<getParams>()変えてmapを削除したところ表記されました。
ありがとうございます。