props.array.map не является функцией

Question

У меня есть несколько компонентов, которые должны отображаться динамически на основе значений, передаваемых через реквизиты. Мой основной компонент (1) динамически создает свои подкомпоненты (2) и передает значения в эти компоненты через реквизиты. Каждый созданный компонент (2) должен затем использовать значения в подпорках для создания новых подкомпонентов (3) этого компонента.

Проблема возникает, когда я пытаюсь отобразить массив объектов, переданный как подпорки в компоненте 2. Компонент 1 успешно создает компоненты 2, но компонент 2 отображает ошибку «this.props.section.map не является функцией». Я использую точный код из первого компонента, единственное отличие состоит в том, что я ссылаюсь на массив через реквизиты.

this.state = {
  menuSections: [
    {
      id: 1, title: 'Starters', menuItem: [{
        id: 1,
        name: 'Meatball',
        description: 'Large Meatball',
        price: '11 meatballs'
      }]
    },
    {
      id: 2, title: 'Starters', menuItem: [{
        id: 2,
        name: 'Meatball',
        description: 'Large Meatball',
        price: '11 meatballs'
      }]
    },
    {
      id: 3, title: 'Starters', menuItem: [{
        id: 3,
        name: 'Meatball',
        description: 'Large Meatball',
        price: '11 meatballs'
      }]
    },
  ],

{this.state.menuSections.map(menuSection => (<MenuSection
  section={menuSection} mobileMode={this.state.mobileMode} />))}

Это код из моего компонента приложения, который работает как шарм. код для моего 2-го компонента (MenuSection) - вот где возникает проблема.

{this.props.section.map((itemContainer, i) => (<ItemContainer styles={styles} 
  image={imageFood1} title={itemContainer.menuItem[i].name}
  description={itemContainer.menuItem[i].description}
  price={itemContainer.menuItem[i].price} />))}

В идеале функция section.map во 2-м компоненте будет отображать каждый отдельный элемент меню на основе реквизитов, переданных из приложения Main. ,Вместо этого я получаю сообщение об ошибке «this.props.section.map не является функцией».

edit: я знаю, что варианты этого вопроса задавались ранее, но я пробовал множество предложений, ни одно из которых не былоработал.

Answer 1

this.props.section будет объектом типа:

{
    id: 1, title: 'Starters', menuItem: [{
    id: 1,
    name: 'Meatball',
    description: 'Large Meatball',
    price: '11 meatballs'
    }]
}

Так что вы не можете .map это,

либо передать массив:

{
    this.state.menuSections.map(menuSection => (
        <MenuSection 
            section={menuSection.menuItem} 
            id={menuSection.id} 
            title={menuSection} 
            mobileMode={this.state.mobileMode} 
        />
    ))
}

Или вы отображаете массив внутри:

{
    this.props.section.menuItem.map((itemContainer, i) => (
        <ItemContainer 
            styles={styles} 
            image={imageFood1} title={itemContainer.menuItem[i].name}
            description={itemContainer.menuItem[i].description}
            price={itemContainer.menuItem[i].price} 
        />
    ))
}

Answer 2

Раздел - это объект.

this.props.section.menuItem.map()