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

IT技术 javascript react-native ecmascript-6 react-jsx
2021-04-08 09:24:38

我正在尝试从数组中获取数据并使用 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);

}

}

3个回答

不要忘记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

我也想获得该项目的索引，但无法获得。this.state.array.map((item, index) =>. 我从中得到的索引是一些带有 Cyclic reference 的对象，因此也无法打印它。有什么方法可以获得索引值吗？
2021-06-08 09:24:38

尝试将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>
  )
}
好的，谢谢纳德，但你能告诉我为什么更好吗？
2021-06-01 09:24:38
嘿，不会说它更好，我猜这只是构建代码的另一种方式。只要您在地图中返回组件，任何一种方式都可以工作。
2021-06-07 09:24:38
好吧，我问这个是因为有时它需要更少的资源！;-) 顺便说一句，感谢您的代码！
2021-06-09 09:24:38 
lapsList() {

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

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

其它你可能感兴趣的问题
上一篇在 npm install 上发现 4 个漏洞 下一篇React 无状态组件 this.refs..value？