Mui React选项卡未显示Array.map中的数据

Question

我可以使用React MUI Tabs组件很好地显示静态数据，但我不明白为什么我不能映射数据。下面的代码对第二个选项卡显示良好，对第一个选项卡显示无效。

我甚至安装了一个不同的库(react选项卡(，并遇到了完全相同的问题，所以我认为这是我从根本上错过的关于选项卡工作方式的东西。

提前感谢您的帮助！

import * as React from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItemText from '@mui/material/ListItemText';
import ListItem from '@mui/material/ListItem';
import Container from '@mui/material/Container';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import PropTypes from 'prop-types';

const Component = () => {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function TabPanel(props) {
const { children, value, index, ...other } = props;

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
{children}
</Box>
)}
</div>
);
}

TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
};

function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const chemicals = [
{
"Qty_per_100L": "",
"ChemicalName": "Hert",
"Water_Rate": "222",
"Unit": "Kilograms",
"Qty_per_Ha": "22"
},
{
"Unit": "Grams",
"Qty_per_100L": "22",
"ChemicalName": "Fret",
"Water_Rate": "1333",
"Qty_per_Ha": ""
},
{
"Qty_per_Ha": "42",
"Unit": "Litres",
"Water_Rate": "1131",
"Qty_per_100L": "",
"ChemicalName": "Blapper"
},
{
"Qty_per_100L": "",
"ChemicalName": "Hullpy",
"Water_Rate": "123",
"Unit": "Litres",
"Qty_per_Ha": "2"
}
]

return (
<Container component="main" maxWidth="xl">

<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Tab 1" {...a11yProps(0)} /> 
<Tab label="Tab 2" {...a11yProps(1)} />
</Tabs>
</Box>

<TabPanel value={value} index={0}>
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<List>
{chemicals.map((chemical) => {
<ListItem>
<ListItemText>{chemical.ChemicalName}</ListItemText>
</ListItem>
})}
</List>
</Box>
</TabPanel>
<TabPanel value={value} index={1}>
What
</TabPanel>
</Container>
);
}
export default Component;

Answer 1

仅更改此代码

<List>
{chemicals.map((chemical) => (
<ListItem>
<ListItemText>{chemical.ChemicalName}</ListItemText>
</ListItem>
))}
</List>

或

<List>
{chemicals.map((chemical) => {
return(<ListItem>
<ListItemText>{chemical.ChemicalName}</ListItemText>
</ListItem>)
})}
</List>
```