Reactjs 高效地更新状态对象

我使用的是材料UI Accordian（文档中的受控示例），我希望默认情况下打开所有面板。我已经能够通过如下创建一个状态对象来实现这一点。然而，我认为我在handleChange上更新状态的方法很笨拙

有没有更好的方法写这个

  const [state, setstate] = useState({
    panel1: true,
    panel2: true,
    panel3: true,
    panel4: true,
  });

  const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, isExpanded: boolean) => {
    switch (panel) {
      case "panel1":
        setstate({ ...state, panel1: state.panel1 ? false : true });
        break;
      case "panel2":
        setstate({ ...state, panel2: state.panel2 ? false : true });
        break;
      case "panel3":
        setstate({ ...state, panel3: state.panel3 ? false : true });
        break;
      case "panel4":
        setstate({ ...state, panel4: state.panel4 ? false : true });
        break;
      default:
        break;
    }
  };

const[state，setstate]=useState({
第一组：是的，
第二组：是的，
第三组：是的，
第四组：没错，
});
常量handleChange=（面板：字符串）=>（事件：React.ChangeEvent，isExpanded:boolean）=>{
开关（面板）{
案例“专题小组1”：
setstate（{…state，panel1:state.panel1？false:true}）；
打破
案例“专题小组2”：
setstate（{…state，panel2:state.panel2？false:true}）；
打破
案例“第3小组”：
setstate（{…state，panel3:state.panel3？false:true}）；
打破
案例“第4小组”：
setstate（{…state，panel4:state.panel4？false:true}）；
打破
违约：
打破
}
};

改用数组：

const [panels, setPanels] = useState(new Array(4).fill(true));
const handleChange = (panelIndex: number) => () => {
  const newPanels = [...panels];
  newPanels[panelIndex] = !newPanels[panelIndex];
  setPanels(newPanels);
};

---

然后使用，例如，

handleChange（0）

和

handleChange（2）

而不是

handleChange（'panel1'）

和

handleChange（'panel3'）

您可以这样做，其中

面板处于状态

是

开关中的
默认值
的替代

const [state, setstate] = useState({
  panel1: true,
  panel2: true,
  panel3: true,
  panel4: true
})

const handleChange = (panel: string) => (
  event: React.ChangeEvent<{}>,
  isExpanded: boolean
) => {
  panel in state &&
    setstate(prevState => ({
      ...prevState,
      [panel]: state[panel] ? false : true
    }))
}


const[state，setstate]=useState({
第一组：是的，
第二组：是的，
第三组：是的，
第四组：对
})
常量handleChange=（面板：字符串）=>(
事件：React.ChangeEvent，
isExpanded:布尔型
) => {
状态面板&&
设置状态（prevState=>({
…国家，
[面板]：状态[面板]？假：真
}))
}
如果您仅使用受控模式切换打开/关闭，则可以将默认手风琴扩展到新组件。将打开/关闭状态设置为它自己的状态

const NewAccordion = ({ initialOpen = true, ...restProps }) => {
    const [expanded, setExpanded] = React.useState(initialOpen)
    const toggle = (event, isExpaneded) => setOpened(!isExpaneded)
    return (
        <Accordion expanded={expaneded} onChange={toggle} {...restProps} />
    )
}

const NewAccordion=（{initialOpen=true，…restProps}）=>{
const[expanded，setExpanded]=React.useState（initialOpen）
常量切换=（事件，IsExpaned）=>setOpened（！IsExpaned）
返回(
)
}

若仍要使用对象，只需覆盖当前面板的状态。无需使用开关盒

const [state, setState] = React.useState({
    panel1: true,
    panel2: true
})
const handleChange = (panel) => (event, isExpaneded) => setState(prev => ({ ...prev, [panel]: !isExpaneded }))

// render
<Accordion expaneded={state.panel1} onChange={handleChange('panel1')} />

const[state，setState]=React.useState({
第一组：是的，
第二组：对
})
const handleChange=（panel）=>（事件，isexpaned）=>setState（prev=>（{…prev，[面板]：！isexpaned}））
//渲染