從React Native中的數組映射函數動態渲染內容

Question

我正在嘗試從數組中獲取數據並使用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);

}

}

Answer 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

Answer 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>
  )
}

Answer 3

你忘記了函數lapsList()開頭的返回

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

Answer 4

lapsList() {

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

你忘了退回地圖。 此代碼將解決此問題。