如何通过React Router路由参数发起Axios请求并更新组件状态？

嘿，你遇到的这个无限循环问题我太熟悉了！根源很明确：componentDidUpdate会在组件每次状态或props更新后触发，而你在这个生命周期里直接调用this.setState，又会再次触发componentDidUpdate，一来一回就形成了死循环。下面给你两种靠谱的解决方案，分别对应类组件和现在更推荐的函数组件写法：

类组件的正确实现 #

我们需要把初始加载和参数变化两种情况分开处理，并且在更新时判断参数是否真的变化，避免无意义的请求：

export default class VideoPage extends Component {
  constructor(props){
    super(props); // 一定要把props传给super，确保构造函数能正常访问props
    this.state = {
      mainVideo: defaultVideo
    };
  }

  // 组件第一次挂载时，发起初始请求
  componentDidMount() {
    this.fetchVideoData(this.props.match.params.id);
  }

  // 只有当路由id参数变化时，才重新请求数据
  componentDidUpdate(prevProps) {
    // 对比当前id和上一次的id，不一样才执行请求
    if (this.props.match.params.id !== prevProps.match.params.id) {
      this.fetchVideoData(this.props.match.params.id);
    }
  }

  // 把请求逻辑抽成单独方法，提高复用性
  fetchVideoData = (videoId) => {
    axios.get(getVideo(videoId))
      .then(res => {
        console.log(res);
        this.setState({ mainVideo: res.data });
      })
      .catch(err => console.log(err));
  }

  render() {
    // 这里用state里的mainVideo渲染你的组件
    return (
      <div>
        <h2>{this.state.mainVideo.title}</h2>
        {/* 其他子组件，传递状态数据 */}
      </div>
    );
  }
}

关键要点： #

• 用componentDidMount处理第一次进入路由的初始数据请求
• 在componentDidUpdate里加入参数判断，只有当id真正变化时才发起请求，彻底避免循环
• 把请求逻辑抽成独立方法，减少重复代码，也方便后续维护

函数组件的简洁实现（React推荐写法） #

如果你愿意改用函数组件，用useEffect钩子可以更优雅地解决这个问题：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; // React Router v6用法，v5需用withRouter

export default function VideoPage() {
  const { id } = useParams(); // 直接获取路由id参数
  const [mainVideo, setMainVideo] = useState(defaultVideo);

  useEffect(() => {
    // 定义异步请求函数
    const fetchVideoData = async () => {
      try {
        const res = await axios.get(getVideo(id));
        setMainVideo(res.data);
      } catch (err) {
        console.error('请求视频数据失败:', err);
      }
    };

    fetchVideoData();

    // 依赖数组里放id，只有id变化时，这个effect才会重新执行
  }, [id]);

  return (
    <div>
      <h2>{mainVideo.title}</h2>
      {/* 渲染子组件并传递数据 */}
    </div>
  );
}

关键要点： #

• 使用useParams直接获取路由参数（v6写法，v5的话需要用withRouter高阶组件包裹组件后从props取）
• useEffect的依赖数组指定id，确保只有当id变化时才重新请求，完全不会触发循环
• 用async/await让异步代码更易读

核心思路其实很简单：只在路由参数id真正发生变化的时候，才发起API请求并更新状态，这样就不会因为无意义的重复渲染导致循环了。

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