fetchしてきたネストされているjsonデータにアクセスしたい

Question

前提

javascriptでapiを叩き、ネストされているjsonデータを取得しようとしたら以下のエラーメッセージが出ました。

Uncaught TypeError: Cannot read properties of undefined (reading '0')
at App.render (JSON.js:27:1)
at finishClassComponent (react-dom.development.js:19752:1)
at updateClassComponent (react-dom.development.js:19698:1)
at beginWork (react-dom.development.js:21611:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

ネストされていないデータは問題なく取得できました。
fetchしてきたjsonも、resultsの中身も問題なく取得できています。

以下は取得したいjsonです
{
"count": 327,
"next": "https://pokeapi.co/api/v2/ability/?offset=20&limit=20",
"previous": null,
"results": [
{
"name": "stench",
"url": "https://pokeapi.co/api/v2/ability/1/"
},
{
"name": "drizzle",
"url": "https://pokeapi.co/api/v2/ability/2/"
}
]
}

実現したいこと

ネストされているデータを取得し、ローカルのWebページに表示させる

該当のソースコード

import React, {Component} from "react"

class App extends Component {
    constructor(){
        super()
        this.state = {
            loading:false,
            character:{},
        }
    }
    
    componentDidMount(){
        this.setState({
            loading: true
        })
        fetch("https://pokeapi.co/api/v2/ability/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data,
                    loading: false
                })
            })
        }

    render() {
        const displayText = this.state.loading ? "now loading...." : this.state.character.results[0].name
        //results[0]がundefinedと表示され、displayTextの出力が意図したものにならない

        console.log(this.state.character.results)
　　  //こちらは問題なく表示される

        return (
            <div>
                {displayText}
            </div>
        )
    }
}
export default App

試したこと

・count、next、previousを取得（成功）
・resultsの全体をconsoleで表示（成功）
・resultsの特定の番目をconsoleで表示（失敗）Uncaught TypeError: Cannot read properties of undefined (reading '特定の番目')

Comments

[退会済みユーザー]

fetch待たずにレンダリングしているだけなんじゃないの？ そうならasync/awaitを補えば済みそうな気がするけれど。

Answer 1

初期状態でloading: falseとしているため、空のcharacter:{}についてcharacter.results[0].nameを読もうとして失敗しているようです。

componentDidMountより前のコンストラクタ時点でloading: trueとしておく、あるいはこのプロパティをloadedのようにしてロード完了後にtrueとする、ような形で対応するのがいいかと思います。

Comments

[hatano]

ありがとうございます。いただいたアドバイス通りにしてみたら解決しました！
重ねて質問なのですが、なぜcharacter.results[n]とした時だけ動かなかったのでしょうか？

お時間あれば回答いただけるとありがたいです。

[maisumakun]

エラーメッセージのとおりです。初期状態でもcharacter.resultsはundefinedとして値が取れますが、undefinedに対するプロパティ参照（[0]）はReferenceErrorとなります。

Answer 2

なにに躓いているのかよくわからないけれど、これでアクセスできている：

const json = {
"count": 327,
"next": "https://pokeapi.co/api/v2/ability/?offset=20&limit=20",
"previous": null,
"results": [
{
"name": "stench",
"url": "https://pokeapi.co/api/v2/ability/1/"
},
{
"name": "drizzle",
"url": "https://pokeapi.co/api/v2/ability/2/"
}
]
};
for (let i = 0; i < json.results.length; i++) {
  console.log(json.results[i].name);
  console.log(json.results[i].url);
}

Comments

[hatano]

ありがとうございます。例示していただいたコードは手元でもうまく行きました！
また、非同期でrenderとfetchが動いているという考えには及ばなかったので勉強になりました！