@eugenestepanyuk

Как убрать перерисовку меню после нажатия на Menu.Item в React?

Используя antd у меня есть меню, Menu.Item'ы которого я формирую динамически, получая данные из БД (routes для перехода по страницам и их названия)
<Menu
    mode="inline"
    onOpenChange={this.onOpenChange} 
>
    {accessData?.length > 0 ? (
       <SubMenu key="sub1" title={'Docs'}>
           {accessData.map(item => (
              item.parent_route === 'docs' ?
                  <Menu.Item key={item.routeId}>
                      <Link to={item.route}>{item.name}</Link>
                  </Menu.Item> : null
            ))}
        </SubMenu>
    ) : null}
</Menu>


Данные получаю в методе и вызываю сразу после монтирования
componentDidMount() {
       this.fetchData();
    } 
   
    fetchData = async() => {
        const { type, content: access } = await insertAccess(User.decode());
        if (type === 'ok') {
           this.setState({ accessData: access });
        } else {
           this.setState({ accessData: [] });
        }
   }


По нажатию на Menu.Item происходит перерендер всего меню
60795c2421869382898295.gif

Если я статически добавлю меню, то нажатия происходят без перерендера
<SubMenu key="sub1" title={'Docs'}>
             <Menu.Item key="1">
                <Link to="/cabinet">'incoming'</Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="/cabinet/outcoming">'outcoming'</Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="/cabinet/administrative">'administrative'</Link>
              </Menu.Item>
        </SubMenu>


60795c4439f30958153639.gif

Почему так происходит, уже перерыл кучу инфы и не пойму как решить эту проблему. Буду очень признателен за помощь
  • Вопрос задан
  • 28 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы