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

Posted 2023-02-22

【中文标题】从 React Native 中的数组映射函数动态渲染内容

【英文标题】：Render Content Dynamically from an array map function in React Native

【发布时间】：2016-09-23 13:59:16

【问题描述】：

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

【问题讨论】：

请同时描述您的问题

完成。事实上，什么都没有显示（生成的视图）。

【参考方案1】：

别忘了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) =>。我从中得到的索引是一些带有循环引用的对象，因此也无法打印它。有什么方法可以获得索引值吗？

【参考方案2】：

尝试将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>
  )

【讨论】：

好的，谢谢纳德，但你能告诉我为什么它更好吗？

嘿，不会说它更好，我猜只是另一种构建代码的方式。只要您在地图中返回组件，任何一种方式都可以工作。

好的，我问这个是因为有时它需要更少的资源！ ;-) 顺便说一句，感谢您的代码！

【参考方案3】：

lapsList() 

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

您忘记归还地图。此代码将解决问题。