Afficher du Contenu dynamique à partir d'un tableau en fonction de mappage de Réagir Natif

Je vais essayer d'obtenir des données à partir d'un tableau et à l'aide de la carte de fonction pour afficher le contenu. Regardez

**{this.lapsList()}**

et les associés

**lapsList()**

fonction pour comprendre ce que je suis en train de faire. Le résultat est que rien n'est afficher (Vues en vertu de vue, etc.) Voici mon code simplifié:

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);

}

}

veuillez également décrire votre problème
Fait. En fait, rien n'est afficher ("vues").
ok, prendre un coup d'oeil à ma réponse
Il fonctionne! Je vais approuver bientôt (je ne peux pas maintenant).
coool , heureux si ça aide!

OriginalL'auteur Xavier C. | 2016-05-25

32

N'oubliez pas de return mappés tableau , comme:
```
lapsList() {

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

}
```
De référence pour la map() méthode: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

merci a fonctionné pour moi
Ce code ne fonctionne pas dans l'élément de liste
Je veux obtenir l'index de l'élément de trop, mais incapable de l'obtenir. this.state.array.map((item, index) =>. L'index, je reçois de qui en est l'objet avec Cyclique de référence, donc impossible de l'imprimer. Une façon d'obtenir de l'indice de valeur pour qui?

OriginalL'auteur Cherniv
3

Essayez de déplacer le lapsList fonction de votre classe et de votre fonction rendu:
```
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>
  )
}
```
Ok merci Nader, mais pourriez-vous me dire pourquoi c'est mieux s'il vous plaît?
Hey, ne pas dire que c'est mieux, juste une autre façon de structurer votre code, je suppose. De toute façon travailler aussi longtemps que vous revenez à votre composant dans la carte.
Ok, j'ai demandé ça parce que parfois, il prend moins de ressources! 😉 Btw, merci pour votre code!

OriginalL'auteur Nader Dabit

vous avez oublié le retour au début de la fonction lapsList()

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

OriginalL'auteur Franz Medrano

Vous devez vous connecter pour publier un commentaire.