我不明白為什么我的手風琴沒有折疊或展開

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