React Native：在Scrollview

Question

我正在尝试从一组数据中呈现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>

Answer 1

您需要返回每个映射！

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

Answer 2

您没有在地图功能中返回任何内容。 => {}提出了一个功能。

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

Answer 3

您需要在@ map内部返回组件，因为@wnaman在另一个答案中说，或者您可以删除{ }大括号，它将按预期返回。

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

Answer 4

使用括号代替在map函数周围的大括号。

带有括号

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