Javascript 从React Native中的数组映射函数动态渲染内容

Javascript 从React Native中的数组映射函数动态渲染内容,javascript,react-native,ecmascript-6,react-jsx,Javascript,React Native,Ecmascript 6,React Jsx,我试图从数组中获取数据,并使用map函数渲染内容。看 **{this.lapsList()}** 以及相关的 **lapsList()** 函数来理解我正在尝试做什么。结果是没有显示任何内容(视图下的视图等)。这是我的简化代码: class StopWatch extends Component { constructor(props) { super(props); this.state = { laps: [] }; } render() { retur

我试图从数组中获取数据,并使用map函数渲染内容。看

**{this.lapsList()}** 
以及相关的

**lapsList()** 
函数来理解我正在尝试做什么。结果是没有显示任何内容(视图下的视图等)。这是我的简化代码:

class StopWatch extends Component {

constructor(props) {
  super(props);

  this.state = {
    laps: []
  };
}

render() {
  return (
    <View style={styles.container}>
        <View style={styles.footer}>
          <View><Text>coucou test</Text></View>
          {this.lapsList()}
        </View>
    </View>
  )
}

lapsList() {

    this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

_handlePressLap() {

  console.log("press lap");

  if (!this.state.isRunning) {

    this.setState({
      laps: []
    })

    return

  }

  let laps = this.state.laps.concat([{'time': this.state.timeElapsed}]);

  this.setState({
      laps: laps
  })

  console.log(laps);

}
类秒表扩展组件{
建造师(道具){
超级(道具);
此.state={
圈数:[]
};
}
render(){
返回(
库库试验
{this.lapsList()}
)
}
lapsList(){
this.state.laps.map((数据)=>{
返回(
{data.time}
)
})
}
_扶手{
控制台日志(“压圈”);
如果(!this.state.isRunning){
这是我的国家({
圈数:[]
})
返回
}
设laps=this.state.laps.concat([{'time':this.state.timeappeased}]);
这是我的国家({
圈数:圈数
})
控制台日志(laps);
}

}

不要忘记
返回映射数组,如:

lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}
lapsList(){
返回此.state.laps.map((数据)=>{
返回(
{data.time}
)
})
}

map()
方法的参考:

尝试将
lapsList
函数移出类并移到渲染函数中:

render() {
  const lapsList = this.state.laps.map((data) => {
    return (
      <View><Text>{data.time}</Text></View>
    )
  })

  return (
    <View style={styles.container}>
      <View style={styles.footer}>
        <View><Text>coucou test</Text></View>
        {lapsList}
      </View>
    </View>
  )
}
render(){
const lapsList=this.state.laps.map((数据)=>{
返回(
{data.time}
)
})
返回(
库库试验
{lapsList}
)
}
lapsList(){
返回此.state.laps.map((数据)=>{
返回(
{data.time}
)
})
}

你忘了还地图。此代码将解决此问题。

请描述您的问题。事实上,没有显示任何内容(生成的视图)。好的,谢谢纳德,但是你能告诉我为什么它更好吗?嘿,我想这不是更好,只是另一种构建代码的方式。只要您在map中返回组件,任何一种方法都有效。好的,我这样问是因为有时候它需要更少的资源!;-)顺便说一句,谢谢你的代码!我也想获取该项的索引,但无法获取该索引
this.state.array.map((项,索引)=>
。我从中获取的索引是具有循环引用的某个对象,因此也无法打印它。有没有办法获取该索引的索引值?
lapsList() {

    return this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })
}