javascript - props.array.map 不是函数

Question

我有一些组件将根据通过 Prop 传递的值动态呈现。我的主要组件 (1) 正在动态创建其子组件 (2) 并通过 Prop 将值传递给这些组件。然后创建的每个组件 (2) 应该利用 props 中的值来创建该组件的新子组件 (3)。

当我尝试映射组件 2 中作为 props 传递的对象数组时出现问题。组件 1 成功创建组件 2，但组件 2 显示错误“this.props.section.map is not a function”。我使用的是组件一中的确切代码，唯一的区别是我通过 props 引用数组。

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} />))}

这是来 self 的 App 组件的代码，它非常有用。我的第二个组件 (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 函数将根据从主应用程序传递的属性呈现每个单独的菜单项。相反，我收到错误“this.props.section.map 不是一个函数”。

编辑:我知道之前有人问过这个问题的变体，但我尝试了很多建议，但没有一个奏效。

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} 
        />
    ))
}