在 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. 查詢詞在父組件中生成並通過道具傳遞。

最初，調用 API 時查詢術語制造商和型號名稱都為空。 這部分有效，在初始渲染后，我可以看到一個顯示所有預期結果的無序列表。

當父組件通過 props 將新的查詢詞傳遞給“DataLoader”組件時，正在執行 render() function，我可以看到

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

正確執行和重新渲染的部分。

但是，似乎沒有再次調用帶有 Axios 部分的 componentDidMount() function 。 一旦新的道具從父組件傳遞到“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 並檢查 prevProps 與當前 Props 相比是否發生了變化，然后運行您的 axios 調用。

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

Answer 2

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

引用文檔：

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;