如何使用react中的材质UI选项卡显示第一个选项卡

Question

你好！我在react项目中使用材质UI库。一切正常，但我有一个问题 问题是我无法显示第一个选项卡。所以当我打开网站时，所有选项卡都会关闭，只有当我点击链接时，我才会看到一个选项卡。那么如何显示第一个标签呢？

这是我的react组件代码，其中包括以下选项卡：

import React, {useState} from 'react';
import Table from "../assets/img/table.png";
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
import SectionTab from "./SectionTab";
import { createTheme } from '@mui/material/styles';
import {ThemeProvider} from "@mui/material";
function Tabs(props) {
const tabs = [
{
id: 1,
idInString: "1",
tabCards: [
{
img: Table,
title: 'School desk',
price: '1000$',
id: 0
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 1
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 2
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 3
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 4
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 5
},
]
},
{
id: 2,
idInString: "2",
tabCards: [
{
img: Table,
title: 'Cool table',
price: '1000$',
id: 0
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 1
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 2
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 3
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 4
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 5
},
]
},
{
id: 3,
idInString: "3",
tabCards: [
{
img: Table,
title: 'School desk',
price: '1000$',
id: 0
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 1
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 2
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 3
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 4
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 5
},
]
},
{
id: 4,
idInString: "4",
tabCards: [
{
img: Table,
title: 'School desk',
price: '1000$',
id: 0
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 1
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 2
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 3
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 4
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 5
},
]
},
{
id: 5,
idInString: "5",
tabCards: [
{
img: Table,
title: 'School desk',
price: '1000$',
id: 0
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 1
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 2
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 3
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 4
},
{
img: Table,
title: 'School desk',
price: '1000$',
id: 5
},
]
},
];
const links = [
{
name: 'Tables',
id: 0
},
{
name: 'Tables',
id: 1
},
{
name: 'Tables',
id: 2
},
{
name: 'Tables',
id: 3
},
{
name: 'Tables',
id: 4
},
]
// #F08C00
const tabsTheme = createTheme({
palette: {
primary: {
light: '#ffaa36',
main: '#F08C00',
dark: '#a05e00',
contrastText: '#fff',
},
secondary: {
light: 'black',
main: 'black',
dark: '#ba000d',
contrastText: '#000',
},
},
});

const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className="tabs-container">
<h1 className="tabs-title">Products</h1>
<ThemeProvider theme={tabsTheme}>
<Box sx={{width: '100%', typography: 'body1', marginTop: '50px'}}>
<TabContext value={value}>
<Box sx={{borderBottom: 1, borderColor: 'divider', maxWidth: '1200px', margin: '0 auto'}}>
<TabList onChange={handleChange}
aria-label="lab API tabs example"
variant="scrollable"
scrollButtons
allowScrollButtonsMobile
>
<Tab label="Tables & desks" value="1"/>
<Tab label="Sofas" value="2"/>
<Tab label="Beds" value="3"/>
<Tab label="Bookcases & wardrobes" value="4"/>
<Tab label="Kitchens" value="5"/>
</TabList>
</Box>
{tabs.map( (tab) =>
<TabPanel value={tab.idInString}>
<SectionTab key={tab.id} cards={tab.tabCards}/>
</TabPanel>
)}
</TabContext>
</Box>
</ThemeProvider>
</div>
);
}
export default Tabs;

请帮我解决这个问题！

Answer 1

您的状态值从0开始，而选项卡的值从1开始。

罪魁祸首是

const [value, setValue] = React.useState(0);

而

<Tab label="Tables & desks" value="1"/>

起始值为1，您将看到第一个选项卡被选中。