React组件props更新时如何重新触发Axios调用Django Rest API？

嘿，我来帮你搞定这个问题！你遇到的核心问题是：componentDidMount这个生命周期函数只会在组件第一次挂载到DOM时执行一次，所以当父组件传递新的selectedManufacturer或selectedModels props过来时，它不会自动重新运行，导致你的Axios请求没更新。

下面给你两种可行的解决方案，你可以根据自己的代码习惯选择：

方案一：在类组件中使用componentDidUpdate #

我们可以把API请求逻辑抽成一个独立方法，然后在componentDidMount（初始化）和componentDidUpdate（props更新）时调用它，同时要注意判断props是否真的变化，避免无限循环。

修改后的代码如下：

import React from 'react';
import axios from 'axios';

class DataLoader extends React.Component {
  state = { cars: [] }

  // 把请求逻辑抽成复用方法
  fetchCars = () => {
    const { selectedManufacturer, selectedModels } = this.props;
    axios.get(`http://127.0.0.1:8000/firstdraft/api/data?manufacturer=${selectedManufacturer}&model_name=${selectedModels}`)
      .then(res => {
        this.setState({ cars: res.data });
        console.log(res.data);
      })
      .catch(err => {
        // 别忘了加错误处理，避免请求失败无反馈
        console.error('API请求失败:', err);
      });
  }

  componentDidMount() {
    // 组件挂载时执行第一次请求
    this.fetchCars();
  }

  componentDidUpdate(prevProps) {
    // 对比前后props，只有当查询参数变化时才重新请求
    if (
      prevProps.selectedManufacturer !== this.props.selectedManufacturer || 
      prevProps.selectedModels !== this.props.selectedModels
    ) {
      this.fetchCars();
    }
  }

  render(){
    return(
      <>
        <h1>Top Selling Cars</h1>
        {/* 给列表项加key，这是React渲染列表的最佳实践 */}
        <ul>{this.state.cars.map(car => <li key={car.id}> {car.model_name}</li>)}</ul>
        <ul>
          <li>Data {this.props.selectedManufacturer}</li>
          <li>Data {this.props.selectedModels}</li>
        </ul>
      </>
    );
  }
}

export default DataLoader;

关键说明： #

1. 抽取复用方法：把Axios请求逻辑放到fetchCars里，避免在两个生命周期函数里重复写代码；
2. props变化判断：componentDidUpdate接收上一次的props参数prevProps，我们对比前后的查询参数，只有真正变化时才触发请求，防止不必要的API调用和无限循环；
3. 列表key属性：给每个<li>加上唯一key（比如数据的id），消除React的列表渲染警告，提升性能；
4. 错误处理：增加catch块处理请求失败的情况，方便调试和用户反馈。

方案二：转成函数组件使用useEffect #

如果你愿意尝试函数组件，React的useEffect Hook会让这个逻辑更简洁直观，它可以自动监听props的变化并触发副作用（比如API请求）。

示例代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const DataLoader = ({ selectedManufacturer, selectedModels }) => {
  const [cars, setCars] = useState([]);

  useEffect(() => {
    // 定义请求逻辑
    const fetchCars = async () => {
      try {
        const res = await axios.get(`http://127.0.0.1:8000/firstdraft/api/data?manufacturer=${selectedManufacturer}&model_name=${selectedModels}`);
        setCars(res.data);
        console.log(res.data);
      } catch (err) {
        console.error('API请求失败:', err);
      }
    };

    // 执行请求
    fetchCars();
  }, [selectedManufacturer, selectedModels]); // 依赖数组：当这两个props变化时，重新执行effect

  return (
    <>
      <h1>Top Selling Cars</h1>
      <ul>{cars.map(car => <li key={car.id}> {car.model_name}</li>)}</ul>
      <ul>
        <li>Data {selectedManufacturer}</li>
        <li>Data {selectedModels}</li>
      </ul>
    </>
  );
};

export default DataLoader;

关键说明： #

• useEffect的第二个参数是依赖数组，只要数组里的selectedManufacturer或selectedModels发生变化，useEffect里的代码就会重新执行；
• 使用async/await让异步逻辑更易读，替代了Promise的链式调用；
• 函数组件的写法更轻量化，也是React官方推荐的现代写法。

额外小贴士 #

如果用户会频繁切换筛选条件，建议给API请求加防抖处理（比如用lodash.debounce），避免短时间内多次触发请求，减轻后端压力。

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