React Hooks：将参数传递给自定义Hook以动态设置API请求查询

Question

我有React的经验，但是我对使用Hooks非常陌生。我正在研究一个从NHL API检索统计信息的项目。我正在建立一个网站，允许用户按团队查看冰球统计数据。我将项目设置为React-Router，以便每个团队的“统计数据”页面都是团队名称，即/rangers是“纽约流浪者”页面，/capitals是“华盛顿首都”页面，等等...

NHL API的团队统计信息端点类似于[https://statsapi.web.nhl.com/api/v1/teams/3/roster。 teams之后的数字表示您要搜索的球队。此查询中的3代表纽约游骑兵终结点。我已经创建了一个对象来存储团队名称及其相关的API请求编号，如下所示：

const teams = {
    devils: {
        id: 1
    },
    islanders: {
        id: 2
    },
    rangers: {
        id: 3
    }
}

我计划使用useLocation从URL中获取球队名称，在上面的对象中查找它的关联编号，然后将该编号传递给axios获取请求URL以检索该球队的统计数据。

例如，用户转到我项目中/islanders的Islanders页面，然后使用useLocation从URL中获取/islanders，然后在对象中查找Islanders ID并找到2 。然后，我想像这样将2传递给axios GET请求：

const [data, setData] = useState([]);

    useEffect(() => {
        axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
            .then(res => {
                setData(res.data.roster);
                console.log(res);
            })
            .catch(err => {
                console.log('Error : ' + err);
            })
    }, []); 

如何将teamID变量传递给axios请求？我尝试了以下方法：

 const [data, setData] = useState([]);
const classes = useStyles();

// Get URL from team page user is on
const location = useLocation();
//  '/islanders'
const teamWithSlash = location.pathname;
// Removes /    '/islanders' becomes 'islanders'
const team = teamWithSlash.slice(1, teamWithSlash.length);

useEffect((team) => {
    axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams.${team}.id}/roster`)
        .then(res => {
            setData(res.data.roster);
            console.log(res);
        })
        .catch(err => {
            console.log('Error : ' + err);
        })
}, []); 

我还尝试构建自定义的Hook，该自定义的Hook将允许我向其传递teamID参数，但我不知道如何进行该工作。我可以访问需要传递给axios请求的号码，但无法弄清楚如何将其动态传递给useEffect。

Answer 1

从useEffect中删除参数。可以从封闭包中获得team值。

也请使用方括号访问动态对象的属性。

useEffect(() => { 
   axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[team].id}/roster`)
        .then(res => {
            setData(res.data.roster);
            console.log(res);
        })
        .catch(err => {
            console.log('Error : ' + err);
        })
}, []);