this.stateのプロパティが取得できない (React)

Question

現在、Reactを使ってページを作っています。そのページ内ではAPIを叩いて、データを取得した後、その中の特定の1つを表示させようとしています。

今、こんな感じでDBの情報を this.state.users に入れています。

constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }

  //初期化（画面レンダリング前)
  componentWillMount(){
    this.fetchResponse();
  }

  //リストの更新
  fetchResponse() {
    fetch('')
    .then ((res) => res.json() )
    .then ((res) => {
      this.setState({
        users: res,
      });
      // console.log(res);
    })
  }

その後、下記render()内でこのようにアクセスをしています。 ２行目の console.log(this.state.users[99]);
では　しっかりとすべての情報が表示されます。（プロパティ[“birthday”]もusers連想配列のkeyとして表示されます。）

しかしながら、３行目の　console.log(this.state.users[99].birthday);
を動かすと、 cannot read property ‘birthday’ of undefined　とエラーが出ます。

なぜかわかりますか？

render() {
    console.log(this.state.users[99]);
    // console.log(this.state.users[99].birthday);

Answer 1

おそらく、最初に代入したusers: []に対してrenderが動いたために、this.state.users[99]がundefinedのまま処理が進んでしまったのではないかと思われます。

fetchによる取得は非同期で、最初のrenderに間に合わないことも考えられるので、データが取得できていなくてもrenderで失敗しないようにコードを書く必要があります。

Comments

[van-0215]

maisumakun様、回答ありがとうございます。　先ほど謝って受付を閉じてしまったため、もしよろしければ、https://teratail.com/questions/144656?modal=q-comp　にコピペした内容を貼り付けていただきたいです。　

fetchが非同期処理で間に合わないとおっしゃっていましたが、その場合、　console.log(this.state.users[99])　が表示されるのはなぜなのでしょうか？

[maisumakun]

本題ではないですが、Reactのバージョンはいくつでしょうか。componentWillMountは、React 16.3で非推奨となっていて、React 17では名前が削除されます。

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

[van-0215]

16.4.2を使用しています。情報ありがとうございます。

Answer 2

render()の先頭で const tmpUsers = this.state.users　としたり、 this.state.usersの中身をすべて回し、別の配列にpush()してみた。
その後で、 console.log(tmpUsers[0])をやると問題なく表示されるが、 console.log(tmpUsers[0].birthday) のようにプロパティまで表示させようとするとエラーがでた。