web-dev-qa-db-fra.com

React mappage natif à travers un tableau avec des objets enfants - fonctionnant différemment comme dans React Web?

J'ai ce tableau qui contient des objets:

var tmp_array = [
 { headline: "Test", text: "Test text", send_at: "test date" }
];

Maintenant, dans l'environnement de réaction Web, j'ai pu mapper ce tableau et renvoyer ses valeurs à une variable qui peut ensuite être rendue.

J'ai donc utilisé la même approche:

    var i = -1;
    var WholeNews = tmp_array.map(function(news){
      i++;
      return(
        <View key={i}>
          <Text>{news.headline}</Text>
          <View>
            <Text>{news.text}</Text>
          </View>
        </View>);
    });

Une fois le mappage terminé, il doit être rendu comme suit:

return(
  <View>
     {WholeNews}
  </View>
);

Malheureusement, je reçois un avertissement dans mon simulateur iOS qui dit:

Les objets ne sont pas valides en tant qu'enfants React (trouvé: objet avec clés {WholeNews}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau ou encapsulez l'objet à l'aide de createFrament (object ) à partir des addons React.

Je ne sais pas si je manque complètement quelque chose ou si je réagis nativement ne prend tout simplement pas en charge un mappage via un tableau comme dans mon exemple.

javascriptreactjsreact-native
14
noa-dev

Cela devrait fonctionner:

WholeNews() {
  return tmp_array.map(function(news, i){
    return(
      <View key={i}>
        <Text>{news.headline}</Text>
        <View>
          <Text>{news.text}</Text>
        </View>
      </View>
    );
  });
}

render() {
  return(
    <View>
      {this.WholeNews()}
    </View>
  )
}
33
zvona

Essayez la méthode forEach au lieu de map:

   var WholeNews =[];
   tmp_array.forEach(function(news, i){
      WholeNews.Push(
        <View key={i}>
          <Text>{news.headline}</Text>
          <View>
            <Text>{news.text}</Text>
          </View>
        </View>);
    });

Et notez d'où vous pouvez obtenir l'index i ..

2
Cherniv