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

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

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

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

Answer 3

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

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