扩展面板中的切换动画不起作用

Question

我正在尝试在 MUI 扩展面板中添加材质 UI 开关。我在对象数组中维护了 Switch 的状态，并通过处理程序更改了状态。问题是，每当我单击开关时，状态都会正确更改，但开关的动画不会显示，直到我再次手动折叠并展开面板。我查看了一些类似的问题，发现有些人使用了“onClick”而不是“onChange”，但不幸的是，这对我不起作用。

export default function ControlledExpansionPanels() {


const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  const initialValue = {
    isPlanMigration: false,
    restOfTheValues: "dummy Data"
  };
  const [value, setValue] = React.useState([initialValue]);

  const handleplanMigrationChange = event => {
    let updatedValue = value;
    updatedValue.forEach((v, idx) => {
      if (idx === Number(event.target.name.split("_")[1])) {
        updatedValue[idx][event.target.name.split("_")[0]] =
          event.target.checked;
      }
    });
    setValue(updatedValue);
  };

  const addPanel = () => {
    setValue(value.concat([initialValue]));
  };

  const handleExpansionPanelChange = panel => (event, isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };
  return (
    <div className={classes.root}>
      {value.map((v, idx) => (
        <ExpansionPanel
          key={idx}
          expanded={expanded === `panel_${idx}`}
          onChange={handleExpansionPanelChange(`panel_${idx}`)}
        >
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1bh-content"
            id="panel1bh-header"
          >
            <Typography className={classes.heading}>
              General settings
            </Typography>
            <Typography className={classes.secondaryHeading}>
              I am an expansion panel
            </Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <FormControlLabel
              control={
                <Switch
                  label="Use Backenddiscover service"
                  checked={v.isPlanMigration}
                  onChange={handleplanMigrationChange}
                  color="primary"
                  name={`isPlanMigration_${idx}`}
                  inputProps={{ "aria-label": "primary checkbox" }}
                />
              }
              label="Plan migration is required"
            />
          </ExpansionPanelDetails>
        </ExpansionPanel>
      ))}
      <IconButton
        color="primary"
        aria-label="Add API Config"
        component="span"
        onClick={addPanel}
      >
        <AddCircleIcon fontSize="large" />
      </IconButton>
    </div>
  );
}

我尝试在扩展面板之外做同样的事情，它似乎工作。

这里是sandbox 的链接。 知道可能是什么问题吗？提前致谢！

Answer 1

您通过将值数组复制到 updatedValues 数组来改变状态。因此问题。

Your updated working codesandbox demo

解决方案 - 克隆数组然后设置状态

const handleplanMigrationChange = event => {
    let updatedValue = [...value]; //<----- like this
    let target = event.target;
    updatedValue.forEach((v, idx) => {
      if (idx === Number(target.name.split("_")[1])) {
        updatedValue[idx][target.name.split("_")[0]] = target.checked;
      }
    });
    setValue(updatedValue);
  };

注意 - 如上所述，获取 event.target 的副本并将其传递给 forEach 回调是一种很好的做法（并且是安全的），就像 react 一样 event pooling