从React Native中的数组映射函数动态渲染内容 [英] Render Content Dynamically from an array map function in React Native

问题描述

我正在尝试从数组中获取数据，并使用map函数渲染内容。看看

  ** {this.lapsList（）} ** 
  pre> 
 
 
和相关联的
  ** lapsList（）** 
  
功能来了解我正在做的事情。结果是没有显示（视图下的视图等）这是我的简化代码：
  class StopWatch extends Component {
 
构造函数（道具）{
 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）; 
 
} 
  
} 
解决方案
不要忘记返回映射的数组，如：
  lapsList（）{
 
 return this.state.laps.map（（data）=> {
 return（
< View>< Text> {data.time}< / Text>< / View> 
）
}）
 
} 
  
参考 map（）方法： https://developer.mozilla.org/en-US/docs/Web / JavaScript / Reference / Global_Objects / Array / map  
 
I'm trying to get data from an array and using map function to render content. Look at 
**{this.lapsList()}** 
and the associated 
**lapsList()** 
function to understand what I'm trying to do. The result is nothing is displaying (Views under view, etc.) Here is my simplified code:
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);

}
}
解决方案
Don't forget to return the mapped array , like:
lapsList() {

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

}
Reference for the map() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

                        
这篇关于从React Native中的数组映射函数动态渲染内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！