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

Question

我正在构建一个小应用程序，可以从 NHL API 中提取统计数据并显示它们。我的应用程序的主要方面是查看团队统计数据，我有几个组件可以发送 API 调用并检索适当的统计数据，即如果用户单击 NY Rangers link，则 API 调用会检索Rangers 统计数据，如果用户单击 Philadelphia Flyers link，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 调用将重新触发，即通过单击传单 link 离开游骑兵页面将自动重新发送 API 调用并检索传单数据。我放弃了模板使用的 Material-UI 导航并构建了自己的导航。现在，当用户从一个团队的页面导航到另一个团队的页面时，他们会被发送到相应的页面，但会显示第一个团队的数据，即当用户在游骑兵页面上并单击 link 转到传单时页面他们按预期发送到 /flyers，但游骑兵队的统计数据仍在显示。

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

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

Answer 1

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

对于你的例子，我把 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 开始使用钩子！

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

React useEffect and React-Router - Resending an API call in component when user navigates to new page

reactjs

react-router

axios

react-hooks

use-effect