1

我有使用 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 页面，然后我使用从 URLuseLocation中抓取/islanders，然后在对象中查找 Islanders ID 并找到2. 然后我想将GET传递2给这样的请求：axios

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，它允许我将teamID参数传递给它，但我不知道如何使它工作。我可以访问需要传递给axios请求的号码，但不知道如何将其动态传递给useEffect.

4

1 回答 1

3

从 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);
        })
}, []);
于 2020-05-04T05:40:07.410 回答