reactjs - 选项卡处于活动状态时调用 rest api 端点

Question

我正在使用标签来切换我网站上的内容。每个选项卡都有从 REST API 加载的不同内容。

有没有办法仅在选项卡处于活动状态而不是在组件挂载时调用 REST API 端点（我在控制台中看到的是每个选项卡同时调用 API）？另外我想每个选项卡只调用一次 API。

提前致谢。

标签： reactjstabsmaterial-ui

Answer 1

您应该避免一次安装所有选项卡，而只安装可见的当前选项卡。Material-UI 示例代码并不适合您的用例。
在您的情况下，父组件中应该有一个状态控件来呈现选项卡，您可以在其中选择在给定时间点安装哪个选项卡。
处理它的一种方法是通过 URL 查询字符串/参数。放置一个 URL 参数来控制应该挂载哪个选项卡并让父组件处理它。
这样，只会挂载当前活动的选项卡，从而调用您的 REST API。
这还有一个额外的好处，即您可以为 URL 添加书签或共享它，当组件安装时，用户将登陆正确的选项卡。