メニュー

【React】axiosを使ったデータ更新時に値を再取得するコード

useEffectに再取得判定する値を入れる。
以下のコードの場合、pathが更新されるたびにaxiosから再取得する。

import {
  useState,
  useEffect
} from 'react'
import { AxiosRequestConfig } from 'axios'
import axios from './lib/axiosClient'


interface AxiosMyDataProps {
  path: string;
}

function AxiosMyData({ path } : AxiosMyDataProps) {
  const [ myData, setMyData ] = useState({
    isLoad: false,
    data: []
  });
 
 useEffect(() => {
    const options: AxiosRequestConfig = {
      url: '/' + path
    }
    async function fetchData() {
      const response = await axios(options);
      setMyData({
        isLoad: true,
        data: response.data
      })
    }
    fetchData();
  },[path])

  return myData.isLoad ? myData.data : false;
}

export default AxiosMyData