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

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图从数组中获取数据，并使用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);
}

}

回答：

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

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

该map()方法的参考：https :

//developer.mozilla.org/zh-

CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

以上是 从React Native中的数组映射功能动态渲染内容 的全部内容， 来源链接： utcz.com/qa/405829.html

回到顶部