不可變更新 React Hooks 數組對象

Question

我用鈎子成功地改變了菜單狀態，但是......

  const [menu, setMenu] = useState([
    {
      parent: 'User',
      permission: false,
      children:[
        {name: 'Vendor', permission: false, readonly: true},
        {name: 'Client', permission: false, readonly: true},
        {name: 'User', permission: false, readonly: true},
      ]
    }
  ]);

  const toggleParent = (key) => {
    let data = {...menu};
    data[key].permission = !data[key].permission
    setMenu(data);
  };

最終在映射函數中出錯，它說：

menu.map 不是函數

這是映射函數：

                  {menu.map((value, key) => (
                    <Switch
                      checked={value.permission}
                      onChange={() => toggleParent(key)}
                      color="primary"
                      name="checkedB"
                      inputProps={{ 'aria-label': 'primary checkbox' }}
                    />
                  ))}

Answer 1

我認為問題來自{...menu} 。 通常當您調用.map()而不是在數組上時會發生此錯誤。 你需要一個[]來代替。

請嘗試以下操作：

const toggleParent = (key) => {
    let data = [...menu];
    data[key].permission = !data[key].permission;
    setMenu(data);
};

我希望這有幫助！

Answer 2

您的代碼存在問題，您的菜單是一個數組，您正在為其分配一個對象並在其上使用地圖。

這是執行此操作的正確方法。

const toggleParent = (key) => {
    let data = [...menu];
    data[key].permission = !data[key].permission
    setMenu(data);
  };