我不明白为什么我的手风琴没有折叠或展开

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}`)}