Почему после onClick мое состояние не определено? [Крюк, Реакция]

Question

Я пытаюсь интегрировать хуки в старое одностраничное приложение React. Для начала я просто заменяю родительский компонент (класс) функциональным компонентом.

• У меня есть 3 раздела в одностраничном приложении.
• У меня есть меню в верхней части страница с четырьмя разделами, которая позволяет автоматически c прокручивать к целевому разделу.

Проблема: когда я нажимаю на меню элементов, у меня появляется "Uncaught TypeError: Cannot читать свойство '1' из неопределенного "

---

1 - Когда мое приложение монтируется, я вызываю firebase и устанавливаю данные в состояние:

export const App = () => {

const [datas, setDatas] = useState([]);

// FIREBASE ------------------------------------ //
useEffect(() => {
    const datas = base.syncState('/data', {
      context: {
        setState: ({ datas }) => setDatas({ ...datas }),
        state: { datas },
      },
      state: 'datas'
    })

    return () => {
      base.removeBinding(datas);
    }
  }, []) 

// USED TO MANAGE THE ACTIVE SECTION ----------- //
const toggleClassActive = (key) => {
    Object.keys(datas[0].itemsMenu).map(key => datas[0].itemsMenu[key].active = false)
    datas[0].itemsMenu[key].active = true
    setDatas(datas[0].itemsMenu)
}

return (
    <div className="container">
        <Menu itemsMenuAction={toggleClassActive}></Menu>
        <Section id="section1" sectionObj={datas[0].sections[1] ? datas[0].sections[1] : "" } />
        <Section id="section2" sectionObj={datas[0].sections[2] ? datas[0].sections[2] : "" } />
        <Section id="section3" sectionObj={datas[0].sections[3] ? datas[0].sections[3] : "" } />
    </div>
)

2- <Menu> код компонента - это класс, я еще не изменил его компонентом функции. Я только что изменил родительский компонент.

class Menu extends Component {

    render() {

        const { itemsMenuAction, --otherProps--} = this.props

        return (
          <div className="main-menu">
            <ul className={openClassState ? 'list-item-menu open' : 'list-item-menu'}>
              {
                Object.keys(itemsMenuState)
                .map(key =>
                  <li className={itemsMenuState[key].active ? 'item-menu active' : 'item-menu'}
                    onClick={ () => itemsMenuAction(key)}
                    key={key}>
                    {itemsMenuState[key].label+"."}
                  </li>
                )
              }

            </ul>
            <div className={openClassState ? "btn-menu open" : "btn-menu"} onClick={openMenuAction}>
              <nav>
                <a href="#" className="menu">
                  <div className="menu--text">
                    <span data-hover>Menu</span>
                    <span data-close>Fermer</span>
                  </div>
                </a>
              </nav>
            </div>
          </div>
        )
    }
}
}

export default Menu

3 - Мои json данные:

{
  "data" : [{
    "itemsMenu" : [ {
      "active" : false,
      "label" : "Accueil"
    }, {
      "active" : true,
      "label" : "Services"
    }, {
      "active" : false,
      "label" : "Savoir-Faire"
    }, {
      "active" : false,
      "label" : "Localisation"
    }, {
      "active" : false,
      "label" : "contact"
    } ],
    "sections" : [ {
      "admin" : {
        "content" : "Section 0 - pette",
        "title" : "Services"
      },
      "tech" : {
        "class" : "section-0",
        "parallax" : false
      }
    }, {
      "admin" : {
        "content" : "Section 1 - TEST",
        "title" : "Section 1 - Titre"
      },
      "tech" : {
        "class" : "section-1",
        "parallax" : false
      }
    }, {
      "admin" : {
        "content" : "Section 2 - Content",
        "title" : "Section 2 - Titre"
      },
      "tech" : {
        "class" : "section-2",
        "parallax" : false
      }
    }, {
      "admin" : {
        "content" : "Section 3 - Content",
        "title" : "Section 3 - Titre"
      },
      "tech" : {
        "class" : "section-3",
        "parallax" : false
      }
    } ]
  }]
}

---

Скриншот ошибки:

введите изображение описание здесь

Answer 1

Это была глупая ошибка:

const toggleClassActive = (key) => {
    Object.keys(datas[0].itemsMenu).map(key => datas[0].itemsMenu[key].active = false)
    datas[0].itemsMenu[key].active = true
    setDatas(datas[0].itemsMenu)
}

-> setDatas (данные) !!!

Answer 2

Попробуйте:

<div className="container">
        <Menu itemsMenuAction={toggleClassActive}></Menu>
        <Section id="section1" sectionObj={datas.length ? datas[0].sections[1] : "" } />
        <Section id="section2" sectionObj={datas.length  ? datas[0].sections[2] : "" } />
        <Section id="section3" sectionObj={datas.length  ? datas[0].sections[3] : "" } />
    </div>