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);

Comments

[spookybird]

コンソールに出力した配列オブジェクトは、コンソール出力後に内容が変わった場合にも同期的に更新されてしまいます。console.log(JSON.stringify(this.state.users[99]));でログを出してみてください。"birthday"はありますか？

[van-0215]

一度 undefined の結果が出た後すぐに　配列一覧が出ます。（birthdayも出ます)

Answer 1

一度 undefined の結果が出た後すぐに　配列一覧が出ます。（birthdayも出ます)

2度ログが出るなら、render()は2度実行されているということになりますね。
ということは、1度目はundefinedなのだからbirthdayなんていうプロパティはありません。
2度目の実行時には取得できます。
undefinedかどうか判定してから取得するようにしましょう。

で、なんで2度実行されるかというと、Reactがstateを監視しているからです。
stateに変更があると、特定のメソッドを使って処理を止めない限りrenderが実行されます。
初期レンダリング時にはusersの中身は空っぽで、APIを実行した結果が返ってきてstateが更新されたタイミングで再度レンダリングされるのでこのような動きになります。

Comments

[van-0215]

ありがとうございます。勉強になります。
sponkybirdさんのおっしゃる特定のメソッドとは何でしょうか？

[spookybird]

https://reactjs.org/docs/react-component.html#shouldcomponentupdate
shouldComponentUpdate というメソッドです。こいつを定義してfalseを返したらrenderは実行されません。条件に応じてrenderを実行するかしないかを制御できます。
公式ドキュメントをすべて読んで、コンポーネントのライフサイクルメソッドぐらいは全部理解しておくことをお勧めします。