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