Неизменяемое обновление React Hooks Array Object

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);
  };