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

问题描述

我正在尝试从数组中获取数据并使用 map 函数来呈现内容.看看

I'm trying to get data from an array and using map function to render content. Look at

**{this.lapsList()}** 

和相关联的

**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);

}

}

推荐答案

不要忘记 return 映射的数组，例如:

Don't forget to return the mapped array , like:

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

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