React useEffect 和 React-Router - 当用户导航到新页面时，在组件中重新发送 API 调用

Question

我正在构建一个小应用程序，它从 NHL API 中提取统计数据并显示它们。我的应用程序的主要方面是查看团队统计数据，我有几个组件可以发送 API 调用并检索适当的统计数据，即如果用户单击 NY Rangers 链接，API 调用会检索 Rangers 统计数据，如果用户单击费城传单链接API 调用检索 Flyers 统计信息等...

几个不同的组件进行 API 调用，它们看起来像这样：

useEffect(() => {
    axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[teamName].id}/stats`)
        .then(async res => {
            setTeamStats(res.data.stats[0].splits[0].stat);
            setTeamPlaceInLeague(res.data.stats[1].splits[0].stat);
        })
        .catch(err => {
            console.log('Error retrieving team stats : ' + err);
        })
}, []);

如您所见，我正在使用模板文字并在 ${teams[teamName].id} 变量。

我正在使用带有侧边菜单的Material-UI 模板进行导航。当用户从一个团队的页面导航到另一个团队的页面时，API 调用将重新触发，即通过单击 Flyers 链接离开 Rangers 页面将自动重新发送 API 调用并检索 Flyers 数据。我放弃了使用模板的Material-UI 导航并构建了我自己的模板。现在，当用户从一个团队的页面导航到另一个团队时，他们会被发送到相应的页面，但会显示第一个团队的数据，即当用户在 Rangers 的页面上并单击链接以转到 Flyers 的页面时，他们会被发送/flyers 符合预期，但流浪者队的统计数据仍在显示中。

View the app 在 Netlify 上，单击汉堡菜单，然后从一个团队导航到另一个团队，看看我的意思。 React-router 导航到相应的页面，但加载了上一页的数据。

当用户导航到不同团队的页面时，如何强制useEffect 重新发送axios 呼叫？这是使用componentDidUpdate 之类的东西来重新渲染组件的问题吗？我是 Hooks 的新手，不确定如何与 react-router 一起使用。

Answer 1

如果 teamName 在每次路由更改时自动更改（例如通过路由参数），这是一个非常简单的修复：useEffect 有一个 dependency array，当变量在依赖项更改中。

对于你的例子，我将teams和teamName放在依赖数组中，所以每次其中一个发生变化时，效果都会再次运行。

useEffect(() => {
    axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[teamName].id}/stats`)
        .then(async res => {
            setTeamStats(res.data.stats[0].splits[0].stat);
            setTeamPlaceInLeague(res.data.stats[1].splits[0].stat);
        })
        .catch(err => {
            console.log('Error retrieving team stats : ' + err);
        })
}, [teams, teamName]);   // <<< this is the dependency array

我强烈推荐 the hooks ESLint plugin 开始使用钩子！