在 Tab react js 中获取和渲染 API 数据

Question

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

Answer 1

假设您正在使用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"