在 componentDidMount() 中反应 Axios 调用

Question

I am trying to build a 'DataLoader' component that calls a Django Rest API via Axios and for testing purposes shows the results of the API call in an unordered list. The query terms are being generated in a parent component and passed via props.

Initially, the API is called with the query terms manufacturer & model_name both being blank. This part works, after the initial render I can see a unordered list that shows all the expected results.

When the parent component passes new query terms via props to the 'DataLoader' component, the render() function is being executed, as I can see the

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

part being executed and re-rendered correctly.

However, it seems that the componentDidMount() function with the Axios part is not being called again. How do I get React to call Axios again once new props have been passed from the parent component to the 'DataLoader' component?

 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

use componentDidUpdate and check if prevProps compared to current Props changed then run your axios call.

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

Answer 2

This is a typical use-case for componentDidUpdate() lifecycle method.

Citing the docs :

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (eg a network request may not be necessary if the props have not changed).

So, in your case:

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

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

A full example would be:

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;