this.props.children.map не является функцией в массиве PropTypes - react-responsive-accordion

#javascript #reactjs

Вопрос:

У меня возникла проблема с этим модулем react для создания вложенных аккордеонов — короче говоря, потому что исходный модуль устарел, я использую эту обновленную версию, но она все еще не работает. Я получаю эту ошибку:

 TypeError: this.props.children.map is not a function
Accordion_render [as render]
src/components/react-responsive-accordion/src/Accordion.js:60
  57 | 
  58 | render: function() {
  59 | 
> 60 |   var nodes = this.props.children.map((node, index) => {
     | ^  61 | 
  62 |     var triggerWhenOpen = (node.props['data-trigger-when-open']) ? node.props['data-trigger-when-open'] : node.props['data-trigger'];
  63 |     var triggerDisabled = (node.props['data-trigger-disabled']) || false;

Насколько я могу судить, по какой-то причине проверка типов prop, в которых она устанавливает дочерние элементы в массив, не работает:

   propTypes: {
    transitionTime: PropTypes.number,
    easing: PropTypes.string,
    startPosition: PropTypes.number,
    classParentString: PropTypes.string,
    onTriggerClick: PropTypes.func,
    closeable: PropTypes.bool,
    children: PropTypes.arrayOf(PropTypes.shape( // <----- HERE
      {
        props: PropTypes.shape({
          'data-trigger': PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.element
          ]).isRequired,
          'data-triggerWhenOpen': PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.element
          ]),        
          'data-triggerDisabled': PropTypes.bool,
        })
      }
    ))
  },

У кого-нибудь есть какие-либо советы? Я нашел несколько вопросов с похожими проблемами, но все они были решены путем добавления ArrayOf propType . Спасибо.

1. вы обернули какой-либо узел с помощью <Accordion> <somecomponent /></Accordion>

2. Привет, проверьте в отладчике, какой объект вы получаете в this.props.children. это скажет вам, почему в нем нет функции map

3.В React children prop является своего рода особенным. Я не думаю, что даже указание children реквизита в качестве массива позволяет вам просто сопоставить его. Вы можете вернуть свою версию react обратно к версии 15. В React v16 вы используете React.Children.map(children, mapFn) React.Дети.

4. @DrewReese Спасибо, это помогло мне разобраться в проблеме, как указано в моем ответе

Ответ №1:

Исправлено — пришлось изменить

     var nodes = this.props.children.map((node, index) => {

Для:

     var nodes = React.Children.map(this.props.children, (node, index) => {