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

2024-05-05

我正在尝试从数组中获取数据并使用映射函数来呈现内容。看着

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

}

}


别忘了return映射的数组,例如:

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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 React Native 中的数组映射函数动态渲染内容 的相关文章

随机推荐