ReactJS創建可重用組件以獲取API資料

我正在嘗試創建一個組件，該組件允許我在匯入的任何位置訪問 API 資料。

我有一個GetTeamsByLeague看起來像這樣的組件。

import axios from 'axios';

const GetTeamsByLeague = (league: string) => {
    const teams = axios
        .get(`http://awaydays-api.cb/api/teams/${league}`)
        .then((response: any) => {
            return response;
        })
        .catch((error: any) => {
            console.log(error);
        });

    return teams;
};

export default GetTeamsByLeague;

然后在我的應用程式組件中，我有這個

import Header from './Components/Header/Header';
import GetTeamsByLeague from './Hooks/GetTeamsByLeague';

import './Reset.scss';

function App() {
    const championshipTeams = GetTeamsByLeague('Championship');
    console.log(championshipTeams);
    return (
        <div className='App'>
            <Header/>
        </div>
    );
}

export default App;

問題是console.log()只回傳承諾而不是資料。

如果我useState()像這樣在我的 GetTeamsByLeague 組件中使用

import axios from 'axios';
import { useState } from 'react';

const GetTeamsByLeague = (league: string) => {
    const [teams, setTeams] = useState({});

    axios
        .get(`http://awaydays-api.cb/api/teams/${league}`)
        .then((response: any) => {
            setTeams(response.data);
        })
        .catch((error: any) => {
            console.log(error);
        });
    return teams;
};

export default GetTeamsByLeague;

然后我收到以下錯誤

(3) [{…}, {…}, {…}] ...

GET http://awaydays-api.cb/api/teams/Championship 429 (Too Many Requests)

/* 編輯 */

我現在也更新了我的 GetTeamsByLeague 組件

import axios from 'axios';
import { useEffect, useState } from 'react';

interface Teams {
    id: number;
    name: string;
    league: string;
    created_at: string;
    updated_at: string;
}

const useGetTeamsByLeague = (league: string) => {
    const [teams, setTeams] = useState<Teams[]>();

    useEffect(() => {
        axios
            .get(`http://awaydays-api.cb/api/teams/${league}`)
            .then((response: any) => {
                setTeams(response.data);
            })
            .catch((error: any) => {
                console.log(error);
            });
    }, [league, setTeams]);

    return teams;
};

export default useGetTeamsByLeague;

在我的組件中完成

import useGetTeamsByLeague from './Hooks/useGetTeamsByLeague';

import './Reset.scss';

function App() {
    const teams = useGetTeamsByLeague('Championship');
    console.log(useGetTeamsByLeague);
    return (
        <div className='App'>
            <Header>
                {teams.map(team => {
                    <li>{team.name}</li>;
                })}
            </Header>
        </div>
    );
}

export default App;

但現在我收到 TypeScript 錯誤Object is possibly 'undefined' console.log 先顯示空陣列，然后顯示資料

undefined

(3) [{…}, {…}, {…}]

uj5u.com熱心網友回復：

在第一種情況下，您回傳一個 Promise，因為您不等待 axios 獲取。第二種情況，在 axios fetch 成功后，你將結果存盤在重新渲染組件的 state 中，這會導致 fetching -> setting state -> re-rendering -> fetching [...] 的無限回圈。

這是 React 鉤子的完美用例。你可以這樣做：

const useGetTeamsByLanguage = (language) => {
    const [status, setStatus] = useState('idle');
    const [teams, setTeams] = useState([]);

    useEffect(() => {
        if (!language) return;

        const fetchData = async () => {
            setStatus('fetching');
            const {data} = await axios.get(
                `http://awaydays-api.cb/api/teams/${league}`);
            if(data){
               setTeams(data);
             }
            setStatus('fetched');
        };

        fetchData();
    }, [language]);

    return { status, teams };
};

然后在你的組件里面做

const {status, teams} = useGetTeamsByLanguage("someLanguage");

辦公室 你應該根據你的需要修改鉤子，因為我不知道你的資料結構等是什么樣的。

uj5u.com熱心網友回復：

每個渲染周期都會運行一個組件函式，因此請求很多次。您應該使用useEffect()鉤子（檔案）。

在這種情況下，將此邏輯包裝在組件中可能不是正確的工具。您可能應該考慮使用自定義鉤子，例如：

const useGetTeamsByLeague = (league: string) => {
    const [teams, setTeams] = useState({});

    useEffect(() => {
        axios
            .get(`http://awaydays-api.cb/api/teams/${league}`)
            .then((response: any) => {
                setTeams(response.data);
            })
            .catch((error: any) => {
                console.log(error);
            });
    }, [league, setTeams]);

    return teams;
};

標籤：javascript 反应

上一篇：節點JS：錯誤：在TCP.onStreamRead處讀取ECONNRESET(node:internal/stream_base_commons:211:20)

下一篇：如何在javascript中提取作為引數傳遞的鏈接的一部分？[復制]