Динамическое отображение содержимого из функции map map в React Native

Я пытаюсь получить данные из массива и использовать функцию карты для рендеринга содержимого. Посмотрите

**{this.lapsList()}**

и связанный с ним

**lapsList()**

чтобы понять, что я пытаюсь сделать. В результате ничего не отображается (Views in view и т.д.) Вот мой упрощенный код:

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

Ответ 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()

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

Ответ 4

Как я могу представить данные и отобразить их, если форма данных, как это?

export default [
    {
        videoId: "0pdtVdfj17Q",
        playlistId: "OLAK5uy_kCvtbP2jVjcNW3nrA1rsZhprJgIcTgMKs",
        imgLarge: "https://i.ytimg.com/vi/0pdtVdfj17Q/maxresdefault.jpg",
        imgSmall: "https://i.ytimg.com/vi/0pdtVdfj17Q/maxresdefault.jpg"
    },
    {
        videoId: "3hfM9pmL3BA",
        playlistId: "OLAK5uy_kCvtbP2jVjcNW3nrA1rsZhprJgIcTgMKs",
        imgLarge: "https://i.ytimg.com/vi/3hfM9pmL3BA/hqdefault.jpg",
        imgSmall: "https://i.ytimg.com/vi/3hfM9pmL3BA/hqdefault.jpg"
    },
    {
        videoId: "55ow-gO9MDg",
        playlistId: "OLAK5uy_kCvtbP2jVjcNW3nrA1rsZhprJgIcTgMKs",
        imgLarge: "https://i.ytimg.com/vi/55ow-gO9MDg/hqdefault.jpg",
        imgSmall: "https://i.ytimg.com/vi/55ow-gO9MDg/hqdefault.jpg"
    }
]

Ответ 5

lapsList() {

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

Вы забыли вернуть карту. этот код решит проблему.