MUI受控手风琴点击单个时所有图标同步变化问题求助

问题根源在于你把expandicon定义成了全局变量，它仅依赖组件的expanded状态，导致所有Accordion的图标共用同一个状态判断结果，点击任意手风琴时所有图标会同步切换。

只需把图标的判断逻辑移到map循环内部，让每个Accordion自行判断是否为当前展开面板，即可实现图标独立控制：

修改后的完整代码：

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ControlPointIcon from '@mui/icons-material/ControlPoint';
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';

const data = [
  {left: "general settings", right:"this is an accordion", text :"blabla", id:"pannel-1"}, 
  {left:"users", right: "you're not an user", text:"allela eegf aa ", id:"pannel-2"}
];

export default function ControlledAccordions() {
  const [expanded, setExpanded] = React.useState<string | false>(false);

  const handleChange =
    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
      setExpanded(isExpanded ? panel : false);
    };

  return (
    <div>
     {data.map((item) => 
      <Accordion key={item.id} expanded={expanded === item?.id} onChange={handleChange(item.id)}>
      <AccordionSummary
        // 针对当前item的id判断，渲染对应图标
        expandIcon={expanded === item.id ? <RemoveCircleOutlineIcon /> : <ControlPointIcon />}
        id={item.id}
      >
        <Typography sx={{ width: '33%', flexShrink: 0 }}>
         {item.left}
        </Typography>
        <Typography sx={{ color: 'text.secondary' }}>{item.right}</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
         {item.text}
        </Typography>
      </AccordionDetails>
    </Accordion>)}
    </div>
  );
}

修改说明： #

• 删除全局的expandicon变量，改为在每个AccordionSummary的expandIcon属性中，直接判断当前item.id是否等于expanded状态值，渲染对应图标。
• 给每个Accordion添加key={item.id}，符合React列表渲染规范，避免不必要的重渲染警告。

修改后每个手风琴的图标会根据自身展开状态独立切换，不会再出现同步变化的问题。

内容的提问来源于stack exchange，提问作者Florie Anstett