时间戳

首页 > 解决方案 > 高效更新 React useState 对象

reactjs - 高效更新 React useState 对象

问题描述

我正在使用 Material 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;
    }
  };

标签： reactjsmaterial-ui

解决方案

改用数组：

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')。

推荐阅读