在 Tab 反应 js 中获取并呈现 API 数据

Question

我计划创建一个包含四个选项卡的页面。每个选项卡都将包含自己的数据。我已经浏览了三个多小时如何在选项卡中使用 API 数据。我只能看到如何使用 material 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"

在 Tab 反应 js 中获取并呈现 API 数据

Fetch and render API data inside Tab react js

reactjs

material-ui

react-tabs