React Native：Array.map 不在 Scrollview 中呈现

Posted 2023-02-22

【中文标题】React Native：Array.map 不在 Scrollview 中呈现

【英文标题】：React Native: Array.map not rendering within Scrollview

【发布时间】：2018-01-23 22:17:02

【问题描述】：

我正在尝试从数据数组中呈现 ScrollView 组件中的项目列表，但由于某种原因，这些项目没有显示，或者根本没有呈现！？在下面的示例中，只有<SomeOtherComponent /> 出现，而​​它前面应该有三个橙色方块（假设this.state.test 是一个数组，例如[0, 1, 2]）。我做错了什么？

<ScrollView
  style=flex: 1
  contentContainerStyle=width: '100%', alignItems: 'center'>
  
  this.state.test.map((item, index) => 
    <View style=height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10 />
  )
  
  <SomeOtherComponent />
</ScrollView>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【参考方案1】：

使用括号代替地图函数周围的大括号。

带括号

this.state.test.map((item, index) => (
<View style=height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10 />
))

---

带大括号 - 在 map 函数中添加返回

this.state.test.map((item, index) => 
  return (
   <View style=height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10 
   />
  )
)

【参考方案2】：

您需要返回map 中的组件，您可以按照@wnaman 在另一个答案中所说的那样做，或者您可以删除 大括号，它将按预期返回。

  this.state.test.map((item, index) => 
    <View style=height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10 />
  )

【参考方案3】：

您没有在 map 函数中返回任何内容。 => 建议一个函数。

使用=> return <Component/> 或=> <Component/>

【讨论】：

或=> (<Component/>)如果首选多行JSX，只需将 ... 替换为( ... )

【参考方案4】：

您需要返回每个映射！

  this.state.test.map((item, index) => 
        return (
            <View style=height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10 />
        )
  )

【讨论】：

返回后组件也没有渲染，控制台也没有错误。