在 Tab react js 中获取和呈现 API 数据

问题描述

我计划创建一个包含四个选项卡的页面。每个选项卡都将包含自己的数据。我已经浏览了三个多小时如何在 Tabs 中使用 API 数据。我只能看到如何使用 Material UI、BootStrap、React Tabs 创建选项卡。我正在寻找如何在选项卡组件中获取 API 数据的参考。所有四个选项卡将处理不同的端点。任何人都可以帮助我解决在切换选项卡时如何处理不同的 API 调用。如果我得到参考，我会努力实现我的结果。任何人都可以帮助我参考这一点。提前致谢。

解决方法

假设您正在使用 MUI Tabs 并且您有例如 3 个标签，例如：

import React from 'react';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

export default function MyTabs() {
   const [value,setValue] = React.useState(0);

   const handleChange = (event,newValue) => {
     setValue(newValue);
   };

 return (
    <Paper square>
       <Tabs
         value={value}
         indicatorColor="primary"
         textColor="primary"
         onChange={handleChange}
        aria-label="disabled tabs example"
       >
          <Tab label="Tab1" />
          <Tab label="Tab2"/>
          <Tab label="Tab3" />
       </Tabs>
   </Paper>
 );
}

您可以使用 value 值拦截点击的选项卡，然后调用您自己的端点。 所以你的 handleChange 变成：

const handleChange = (event,newValue) => {
   switch(newValue){
       case 0:
         // call api for Tab1
         break;
       case 1:
         // call api for Tab2
         break;
       case 2:
         // call api for Tab3
         break;
       default:
         break;
   }
     setValue(newValue);
};

注意：如您所见，value 以值 0 (const [value,setValue] = React.useState(0);) 开头，因此这意味着在首次加载时您将看到 Tab1 而 handleChange 尚未叫。在这种情况下，您可以通过这种方式在标签页加载上使用 useEffect 钩子：

useEffect(() => {
   // call api for Tab1
},[]); //<-- this means "just one time at component loading"