Предупреждение: компонентам функции без сохранения состояния нельзя давать ссылки в NavLink, styled-components - PullRequest
0 голосов
/ 31 января 2020

Я получаю следующую ошибку в React 16.8:

Предупреждение: компонентам функций без состояния не могут быть даны ссылки. Попытки получить доступ к этой ссылке потерпят неудачу.

Check the render method of `Button`.
    in NavLink (created by Button)
    in Button
    in Unknown (created by StyledComponents__ButtonLink)
    in StyledComponents__ButtonLink (created by PageHeaderLayout)
    in div (created by PageHeaderLayout)
    in b (created by PageHeaderLayout)
    in div (created by GridColumn)
    in GridColumn (created by PageHeaderLayout)
    in div (created by GridRow)
    in GridRow (created by PageHeader__PageHeaderRow)
    in PageHeader__PageHeaderRow (created by PageHeaderLayout)
    in PageHeaderLayout (created by PageHeader)
    in PageHeader (created by Connect(PageHeader))
    in Connect(PageHeader) (created by Route)
    in Route
    in Switch
    in Unknown (created by BaseLayout)
    in div (created by Grid)
    in Grid (created by BaseLayout__ContentGrid)
    in BaseLayout__ContentGrid (created by BaseLayout)
    in div (created by BaseLayout__LayoutContainer)
    in BaseLayout__LayoutContainer (created by BaseLayout)
    in BaseLayout
    in Router (created by BrowserRouter)
    in BrowserRouter
    in AppContainer
    in Provider

Это происходит в следующем коде:

      <b><br />
        {entityLinks.map(({ popup, ...linkProps }) =>
          <div key={linkProps.content}>
            <ButtonLink as={NavLink} {...linkProps} />
            {popup && <Popup content={popup} trigger={<Icon name="help circle outline" color="grey" />} />}
          </div>,
        )}  
      </b>

Где ButtonLink:

import React from 'react'
import styled from 'styled-components'
import { Button } from 'semantic-ui-react'

export const ButtonLink = styled(({ color, padding, ...props }) => <Button {...props} />).attrs({ basic: true })` 
  &.ui.button.basic {
    white-space: nowrap;
    ...
    ...

The entityLinks, которые передаются в ButtonLink - это просто массив такой структуры:

const entityLinks = [{
  to: `/variant_search/${searchType}/${searchId}`,
  content: `${snakecaseToTitlecase(searchType)} Variant Search`,
  disabled,
  popup: disabled ? 'Search is disabled until data is loaded' : null,
}]  

Как я могу это исправить? Я просмотрел несколько похожих тем, но все еще не могу это исправить в данном конкретном случае. Вот как выглядит расширенный код React в Chrome:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...