1

React アプリケーションでライフサイクル フックがどのように機能するか理解できません。次のように、render メソッドでいくつかの props を Pagination コンポーネントに渡すアプリケーションがあります。

<Pagination
  totalRecords={this.state.blogPosts.length}
  pageLimit={5}
  pageNeighbours={2}
  onPageChanged={() => {console.log('page changed');}}
/>

Pagination コンストラクターで、prop 値を出力します。

const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;
console.log('totalRecords=', totalRecords);

0が出力されます。

当然のことながら、まだブログの投稿を取得していません。したがって、componentDidMount では、次のようにブログ投稿をフェッチします。

componentDidMount() {
  axios.get('/blogs').then(
    response => {
      if (response.data) {
        const entries = Object.entries(response.data);
        this.setState({ 
          blogPosts: entries.map(p => Object.assign({id: p[0]}, {...p[1]}))
            .sort((p1, p2) => p1.updatedAt > p2.updatedAt ? -1 : 1),
        });
      }
    },
    err => {
      console.log('err=', err);
    });
}

これで、ブログの投稿が読み込まれましたが、ページネーション コンポーネントは更新されません (ブログ自体は更新されたように見えますが)。

ここで、React ライフサイクル フックがどのように機能するかについてのガイダンスが必要です。状態が変化した後、render メソッドは再実行されませんか? Pagination コンポーネントが再レンダリングされ、今回は totalRecords prop が 3 (または 0 より大きい数値) を出力することを期待しています。再レンダリングしても、コンストラクターは 1 回しか実行されませんか?

したがって、再レンダリングをトリガーする必要がある場合に備えて、componentShouldUpdate()メソッドでこれを実行しました。

shouldComponentUpdate(nextProps, nextState) {
  console.log('this.state.blogPosts.length=', this.state.blogPosts.length);
  console.log('nextState.blogPosts.length=', nextState.blogPosts.length);
  return this.state.blogPosts.length !== nextState.blogPosts.length;
}

確かに、this.state.blogPosts.lengthショー0とnextState.blogPosts.lengthショー3。したがって、それらは異なります.3つのブログ投稿で状態が更新されることを期待しています. 長さが異なる場合は true を返すので、コンポーネントを更新する必要があります。それは再レンダリングを意味しませんか？

いずれにせよ、totalRecords は 0 のままです。Pag​​ination コンポーネントで時間間隔を設定することもできます。

setInterval(() => {
  console.log('this.totalRecords =', this.totalRecords);
}, 5000);

ブログ投稿が取得されて状態に追加されてから 5 秒ごとに 0... が出力されます。

Pagination コンポーネントが totalRecords の新しい値で更新されないのはなぜですか?

4

1 に答える 1