Comment éviter les "enfants avec la même clé," quand le remplacement de l'état dans ReactJs composant

J'ai créé un Réagir Composant qui rend un ensemble de sous-éléments étant donné un tableau d'id. Le tableau des id est maintenu dans l'état du composant parent, puis-je lancer quelques appels ajax basé sur l'id pour récupérer des données à rendre. Les données extraites sont stockées dans un autre tableau de données dans l'état. Le rendu des composants utiliser l'id comme clé.

Les valeurs peuvent changer en fonction des actions à l'extérieur du composant, donc j'utilise setState sur le composant à remplacer le tableau. La mise à jour de l'id de l'etat sera probablement contenir certains des mêmes identifiants comme dans le tableau d'origine. En même temps, je vide le "tableau de données", de sorte que tout sera rendu à nouveau.

Quand je le fais parfois, j'ai la clé d'alerte:

Avertissement: flattenChildren(...): Rencontré deux enfants avec le même
clé. Enfant les clés doivent être uniques; lorsque deux enfants partagent une clé, seulement
le premier enfant sera utilisé.

Le nouveau tableau ne contient pas de doublons. Alors, pourquoi fait-il et que puis-je faire pour éviter cela?

Edit: Ajout de code à la demande. Note: je suis en utilisant le Infini Défilement module. Cela pourrait-il être la cause?

État Initial:

getInitialState: function() {
  return {
    hasMore: true,
    num: 0,
    movieIds: this.props.movieIds,
    movies: []
  };
},

Fonction rendu:

render: function() {
  var InfiniteScroll = React.addons.InfiniteScroll;

  return (
    <InfiniteScroll
        pageStart={0}
        loadMore={this.loadMore}
        threshold='20'
        hasMore={this.state.hasMore}>
        <ul className="movieList">
          {this.state.movies}
        </ul>
    </InfiniteScroll>       
);
}

Simplifié de la charge plus:

comp = this;
$.ajax( {
  url: url,
  contentType: "json",
  success: function (data) {
    var m = createMovieLi(data);
    var updatedMovies = comp.state.movies;
    updatedMovies[num] = m;
    comp.setState({movies: updatedMovies});
  }
});

Et enfin lors de la mise à jour en dehors du composant:

movieBox.setState({
  hasMore: true,
  num: 0,
  movieIds: filteredIds,
  movies: []
});
  • Donner un exemple minimal de code qui montre le problème. C'est probablement une solution simple, mais totalement dépendant de votre code.
InformationsquelleAutor | 2014-09-28