我不明白为什么我的手风琴没有塌陷或膨胀

Question

我有一个包含几个手风琴项的页面。它的信息基于json文件。在初始加载页面时，一切正常，但在使用过滤器时，除了不再折叠或展开外，条目被正确过滤。

let ifFilter = false;
var dataReturn = [], itemlist;`
export default function EventPastData(data) {`

data = Object.values(data.data.past);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(5); //change this number to change how many items in each page
const [expanded, setExpanded] = useState(false);
const [year, setYear] = useState('');

const handleOpen = (panel) => (e, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
console.log(data);
console.log(dataReturn)
function populate(d) {
itemlist = d.map((x, index) => {
//console.log(index);
return (
<Accordion
key={index}
className={`${new Date(x.date).getFullYear()}`}
expanded={expanded === `panel${index}`}
onChange={handleOpen(`panel${index}`)}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Avatar variant="rounded">
<img src={require(`../../img/${x.img}`)} alt={x.img} />
</Avatar>
<Paragraph text={x.title} size='1.3rem' />
<Paragraph text={x.date} size='1.1rem' />
</AccordionSummary>
<AccordionDetails>
<Paragraph text={x.description} size='1.1rem' />
<br />
<Paragraph text={'Venue: ' + x.venue} size='1.1rem' />
<Paragraph text={'Time: ' + x.time} size='1.1rem' />
</AccordionDetails>
</Accordion>
)     
});
};
const handleFilter = (event) => {
setYear(event.target.value);
dataReturn = [];
for (let i = 0; i < data.length; i++) {
if (new Date(data[i].date).getFullYear() === event.target.value) {
dataReturn.push(data[i]);
};
};
if (event.target.value !== '') {
ifFilter = true;
populate(dataReturn);
} else {
populate(data);
};
};

if (ifFilter !== true) {
populate(data);
};

然后使用以下HTMl显示页面内容:

return (
<div className='test'>
<Container sx={{mx: 'auto'}}>
<div id='listAccordion'>
{currentItems}
</div>
<Grid container direction="row" justifyContent="center" alignItems="center" spacing={2}>
<Grid item sm={1}>
<FormControl sx={{ m: 1, minWidth: 80 }} color='secondary'>
<InputLabel id="demo-simple-select-autowidth-label">Year</InputLabel>
<Select
labelId="demo-simple-select-autowidth-label"
id="demo-simple-select-autowidth"
value={year}
onChange={handleFilter}
autoWidth
label="Year"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={2019}>2019</MenuItem>
<MenuItem value={2020}>2020</MenuItem>
<MenuItem value={2021}>2021</MenuItem>
<MenuItem value={2022}>2022</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item sm={11}>
<Pages itemsPerPage={itemsPerPage} totalItems={itemlist.length} paginate={paginate}></Pages>
</Grid>
</Grid>
<p>You're on page: <strong>{currentPage}</strong></p>
</Container>
</div>
)

这是不使用过滤器时页面的样子，手风琴工作

这是使用过滤器后的页面，手风琴不再工作

我不知道过滤器可能正在做什么，这导致手风琴项目不工作。如果有人有什么想法可以告诉我，我将不胜感激。

Answer 1

这是错误的。这将在组件渲染时调用handleOpen。

onChange={handleOpen(`panel${index}`)}

应该是一个像这样的箭头函数:

onChange={() => handleOpen(`panel${index}`)}