面试题：React中如何在生命周期方法中处理复杂业务逻辑以实现数据的动态更新

Question

假设你正在开发一个电商产品详情页，产品的评论数据需要分页加载。在React组件中，使用生命周期方法来实现首次加载时获取第一页评论数据，当用户点击下一页按钮时加载下一页数据，阐述具体实现思路并写出关键代码片段。

Answer 1

实现思路

1. 初始化状态：在组件的 state 中定义当前页码 page，默认值为 1，以及存储评论数据的数组 comments。
2. 首次加载：利用 componentDidMount 生命周期方法，在组件挂载后，根据当前 page 值（初始为 1）调用获取评论数据的函数。
3. 点击下一页：定义一个处理下一页点击的函数 handleNextPage，在该函数中更新 page 状态值，然后根据新的 page 值再次调用获取评论数据的函数。

关键代码片段

import React, { Component } from 'react';

class ProductReview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      comments: []
    };
    this.handleNextPage = this.handleNextPage.bind(this);
  }

  componentDidMount() {
    this.fetchComments();
  }

  fetchComments = () => {
    const { page } = this.state;
    // 这里应该替换为实际的API请求
    // 假设API返回的数据格式为{data: [评论数据数组]}
    fetch(`/api/comments?page=${page}`)
    .then(response => response.json())
    .then(data => {
        this.setState({
          comments: [...this.state.comments, ...data.data]
        });
      });
  }

  handleNextPage() {
    this.setState(prevState => ({
      page: prevState.page + 1
    }), () => {
      this.fetchComments();
    });
  }

  render() {
    const { comments } = this.state;
    return (
      <div>
        <ul>
          {comments.map((comment, index) => (
            <li key={index}>{comment}</li>
          ))}
        </ul>
        <button onClick={this.handleNextPage}>下一页</button>
      </div>
    );
  }
}

export default ProductReview;