React：ComponentDidMount中动态GET URL无法触发重渲染问题

嘿，我来帮你搞定这个分页请求的问题！你遇到的核心问题是：componentDidMount 只会在组件第一次挂载完成时执行一次，所以当你点击按钮更新page状态后，并没有触发新的API请求，自然也就没法更新电影列表啦。

下面是具体的解决方案和修改后的代码：

核心思路 #

1. 用componentDidUpdate生命周期方法监听page状态的变化，当page改变时重新调用请求函数
2. 确保API请求URL中包含当前的page参数，这样才能请求对应页码的电影数据
3. 在请求成功后更新allMovieList状态，触发组件重新渲染

修改后的完整代码 #

import axios from 'axios';
import React, { Component } from 'react';

class MovieList extends Component {
  state = { 
    allMovieList: [], 
    page: 1 
  };

  componentDidMount() {
    // 组件挂载时请求第一页数据
    this.changePage();
  }

  // 监听状态变化，当page改变时重新请求数据
  componentDidUpdate(prevProps, prevState) {
    // 只有当page确实变化时才发起请求，避免无限循环
    if (prevState.page !== this.state.page) {
      this.changePage();
    }
  }

  async changePage() {
    try {
      // 把当前page参数加入请求URL
      const response = await axios.get(
        `https://api.themoviedb.org/4/discover/movie?api_key=你的API密钥&page=${this.state.page}`
      );
      // 根据TMDB API的返回结构，电影列表通常在response.data.results里
      this.setState({ allMovieList: response.data.results });
    } catch (error) {
      // 别忘了处理请求失败的情况
      console.error('获取电影列表失败:', error);
    }
  }

  // 点击页码按钮的处理函数
  handlePageClick = (newPage) => {
    this.setState({ page: newPage });
  };

  render() {
    const { allMovieList, page } = this.state;
    return (
      <div>
        <h2>第 {page} 页电影列表</h2>
        <div className="movie-grid">
          {allMovieList.map(movie => (
            <div key={movie.id} className="movie-card">
              <h3>{movie.title}</h3>
              {/* 这里可以添加电影海报等其他信息 */}
            </div>
          ))}
        </div>
        {/* 分页按钮示例 */}
        <button onClick={() => this.handlePageClick(page - 1)} disabled={page === 1}>上一页</button>
        <button onClick={() => this.handlePageClick(page + 1)}>下一页</button>
      </div>
    );
  }
}

export default MovieList;

关键细节说明 #

• componentDidUpdate的判断逻辑：一定要对比prevState.page和当前state.page，否则每次组件更新都会触发请求，容易导致无限循环
• API请求的page参数：TMDB的discover接口支持page参数，必须把当前状态的page拼到URL里，才能拿到对应页码的数据
• 状态更新：请求成功后必须用setState更新allMovieList，这样组件才会重新渲染新的电影列表
• 错误处理：添加try/catch捕获请求异常，避免请求失败时程序崩溃

内容的提问来源于stack exchange，提问作者Stephan