在 componentDidMount() 中反应 Axios 调用

Question

我正在尝试构建一个“DataLoader”组件，该组件通过 Axios 调用 Django Rest API，并出于测试目的在无序列表中显示 API 调用的结果。查询词在父组件中生成并通过 props 传递。

最初，调用 API 时查询术语制造商和型号名称都为空。这部分有效，在初始渲染后，我可以看到一个显示所有预期结果的无序列表。

当父组件通过 props 将新的查询词传递给“DataLoader”组件时，正在执行 render() 函数，我可以看到

<ul><li>Data {this.props.selectedManufacturer}</li><li>Data {this.props.selectedModels}</li></ul>

部分正在正确执行和重新渲染。

但是，似乎没有再次调用带有 Axios 部分的 componentDidMount() 函数。将新的 props 从父组件传递到“DataLoader”组件后，如何让 React 再次调用 Axios？

import React from 'react';
import axios from 'axios';
import { getDefaultNormalizer } from '@testing-library/react';

class DataLoader extends React.Component {
    state = {
        cars: []
    }
    componentDidMount(props) {
    axios.get(`http://127.0.0.1:8000/firstdraft/api/data?manufacturer=${this.props.selectedManufacturer}&model_name=${this.props.selectedModels}`)
      .then(res => {
        const cars = res.data;
        this.setState({ cars });
        console.log(this.state.cars)
        }
      )
    }
    render(){
        return(
            <>
                <h1>Top Selling Cars</h1>
                <ul>{this.state.cars.map(car => <li> {car.model_name}</li>)}</ul>
                <ul><li>Data {this.props.selectedManufacturer}</li><li>Data {this.props.selectedModels}</li></ul>
            </>
        );
    }
}

export default DataLoader;

Answer 1

这是componentDidUpdate() 生命周期方法的典型用例。

引用the docs:

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 在更新发生后立即调用。初始渲染不调用此方法。

当组件更新时，以此为契机对 DOM 进行操作。只要您将当前的 props 与以前的 props 进行比较，这也是进行网络请求的好地方（例如，如果 props 没有更改，则可能不需要网络请求）。

所以，在你的情况下：

componentDidUpdate(prevProps) {
  const shouldUpdateCars= 
    prevProps.selectedManufacturer !== this.props.selectedManufacturer
    || prevProps.selectedModels!== this.props.selectedModels

  if (shouldUpdateCars) {
    // fetch API and update state
  }
}

一个完整的例子是：

import React from 'react';
import axios from 'axios';
import { getDefaultNormalizer } from '@testing-library/react';

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

    fetchCars(manufacturer, models) {
         axios.get(`http://127.0.0.1:8000/firstdraft/api/data?manufacturer=${manufacturer}&model_name=${models}`)
      .then(res => {
        const cars = res.data;
        this.setState({ cars });
        console.log(this.state.cars)
        }
      )
    }

    componentDidUpdate(props) {
      const shouldUpdateCarsData = 
        prevProps.selectedManufacturer !== this.props.selectedManufacturer
        || prevProps.selectedModels!== this.props.selectedModels

      if (shouldUpdateCarsData ) {
        // fetch API and update state
        fetchCars(this.props.selectedManufacturer, this.props.selectedModels)
      }
    }
    
    render(){
        return(
            <>
                <h1>Top Selling Cars</h1>
                <ul>{this.state.cars.map(car => <li> {car.model_name}</li>)}</ul>
                <ul><li>Data {this.props.selectedManufacturer}</li><li>Data {this.props.selectedModels}</li></ul>
            </>
        );
    }
}

export default DataLoader;

Answer 2

使用 componentDidUpdate 并检查 prevProps 与当前 Props 相比是否发生了变化，然后运行您的 axios 调用。

componentDidUpdatd(prevProps){
  if(prevProps.selectedManufacturer!==this.props.selectedManufacturer){
  //api call here
  }
}