Реакция: Предупреждение: Сбой Тип реквизита: Не удается прочитать свойство 'apply' из неопределенного - PullRequest
Новая
       10

Реакция: Предупреждение: Сбой Тип реквизита: Не удается прочитать свойство 'apply' из неопределенного

0 голосов
/ 30 сентября 2019

Я работаю над navbar в реакции, и я получаю эту ошибку, и я еще не нашел работающего решения. Вот кусок моего кода. Я пытаюсь использовать реагирующую библиотеку prop-types для проверки моих реквизитов navbar с помощью ссылки или раскрывающегося списка. Ниже приведен фрагмент кода, который я написал.

NavBar.js 

const NavBar = ({ navItems }) => {
return (
    <nav role="navigation" className={styles.navBar}>
        <Logo type="text">
            ABCD
        </Logo>
        <div className={[styles.collapse, styles.noCollapse].join(' ')}>
            <SearchBox />
            <NavItems navItemsData={navItems} />
        </div>
    </nav>
);
};

NavItems.js 

const NavItems = ({ navItemsData }) => {
return (
    <ul className={styles.navItems}>
        {navItemsData.map(navItemData => {
            let navItem = <NavItem {...navItemData} key={navItemData.id} />
            if (navItemData.type === 'dropdown') {
                navItem = <NavDropDownItem {...navItemData} key={navItemData.id} />
            }
            return navItem;
        })}
    </ul>
);
};

Проверка PropTypes (в том же файле, что и NavItems): - 

NavItems.propTypes = {
navItemsData: PropTypes.arrayOf(PropTypes.shape({
    id : PropTypes.number,
    type: PropTypes.oneOf(['link', 'dropdown']).isRequired,
    linkText: requiredIf(PropTypes.string.isRequired, props => props.type === 'link'),
    title : requiredIf(PropTypes.string.isRequired, props => props.type === 'dropdown'),
    dropDownList: requiredIf(PropTypes.arrayOf(PropTypes.shape({ linkText: PropTypes.string.isRequired })), props => props.type === 'dropdown')
}))
};

Я продолжаю получать это предупреждение в консоли. Следующее: - 

Warning: Failed prop type: Cannot read property 'apply' of undefined
    in NavItems (at NavBar.js:15)
    in NavBar (at App.js:35)
    in div (at App.js:34)
    in App (at src/index.js:7)

Реквизит, который я передаю: 

const navItems = [{
    id : 1,
    type : 'link',
    linkText : 'Link1'
  },{
    id : 2,
    type : 'link',
    linkText : 'Link2'
  }, {
    id : 3,
    type : 'link',
    linkText : 'Link3'
  }, {
    id : 4,
    type : 'link',
    linkText : 'Link4'
  },{
    id : 5,
    type : 'link',
    linkText : 'Link5'
  },{
    id : 6,
    type : 'dropdown',
    dropDownList : [{
      linkText : 'LinkText'
    }]
  }]

Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 30 сентября 2019

Нет необходимости делать PropTypes.string.isRequired внутри requiredIf, поскольку это уже покрывает необходимый случай.

Edit goofy-rain-6bx03

NavItems.propTypes = {
  navItemsData: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      type: PropTypes.oneOf(["link", "dropdown"]).isRequired,
      linkText: requiredIf(PropTypes.string, props => props.type === "link"),
      title: requiredIf(PropTypes.string, props => props.type === "dropdown"),
      dropDownList: requiredIf(
        PropTypes.arrayOf(PropTypes.shape({ linkText: PropTypes.string })),
        props => props.type === "dropdown"
      )
    })
  )
};
0 голосов
/ 30 сентября 2019

Когда вы используете requiredIf, первый параметр должен быть ожидаемого типа. Но он не должен иметь часть isRequired. Например, ваша проверка должна быть следующей: 

NavItems.propTypes = {
    navItemsData: PropTypes.arrayOf(PropTypes.shape({
      id : PropTypes.number,
      type: PropTypes.oneOf(['link', 'dropdown']).isRequired,
      linkText: requiredIf(PropTypes.string, props => props.type === 'link'),
      title : requiredIf(PropTypes.string, props => props.type === 'dropdown'),
      dropDownList: requiredIf(PropTypes.arrayOf(PropTypes.shape({ linkText: PropTypes.string.isRequired })), props => props.type === 'dropdown')
}))};
...