reactjs - instalar - react js installation

Cómo evitar ''niños con la misma clave'' cuando se reemplaza el estado en el componente ReactJs

Question

Creé un Componente de Reacción que hace que un conjunto de subelementos reciba una matriz de identificadores. La matriz de identificadores se mantiene en el estado del componente principal y luego ejecuto algunas llamadas ajax basadas en los identificadores para obtener datos para su procesamiento. Los datos obtenidos se almacenan en una matriz de datos separada en el estado. Los componentes renderizados usan la identificación como clave .

Los identificadores pueden cambiar en función de las acciones fuera del componente, por lo que utilizo setState en el componente para reemplazar el conjunto. El id-state actualizado probablemente contenga algunos de los mismos ids que en el array original. Al mismo tiempo, vacío la "matriz de datos" para que todo vuelva a ser renderizado.

Cuando hago esto, a veces recibo la advertencia clave:

Advertencia: flattenChildren (...): se encontraron dos niños con la misma llave. Las claves secundarias deben ser únicas; cuando dos niños comparten una llave, solo se usará el primer niño.

La nueva matriz no contiene ningún duplicado. Entonces, ¿por qué sucede y qué puedo hacer para evitar esto?

Editar: se agregó un código por solicitud. Nota: Estoy usando el módulo Infinite Scroll . ¿Podría esto estar causando?

Estado inicial:

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

Función de renderizado:

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

Carga simplificada más:

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

Y finalmente cuando se actualiza fuera del componente:

movieBox.setState({
  hasMore: true,
  num: 0,
  movieIds: filteredIds,
  movies: []
});

Answer 1

Descubrí mi error, y no tenía nada que ver con React per se. Era un caso clásico de falta de cierre de JavaScript dentro de un bucle .

Debido a la posibilidad de duplicados, almacené cada respuesta de ajax en window.localStorage, en movieId. O eso pensé.

En React Inifinite Scroll, cada elemento de la lista se dibuja secuencialmente con una llamada a loadMore-function. Dentro de esta función, hice mi llamada ajax y almacené el resultado en el caché del navegador. El código se veía algo como esto:

  var cachedValue = window.localStorage.getItem(String(movieId));
  var cachedData = cachedValue ? JSON.parse(cachedValue) : cachedValue;

  if (cachedData != null) {
    comp.drawNextMovie(cachedData);
  } else { 
    $.ajax( {
      type: "GET",
      url: this.state.movieUrl + movieId,
      contentType: "json",
      success: function (movieData) {
        window.localStorage.setItem(String(movieId), JSON.stringify(movieData));
        comp.drawNextMovie(movieData);
      }
    });  
  }    

¿Puedes detectar el error? Cuando devuelve la llamada ajax, movieId ya no es lo que era. Así que termino almacenando los datos por la identificación incorrecta, y obtengo algunas advertencias React extrañas a cambio. Como esto se hizo dentro de la función loadMore llamada por el módulo InfiniteScroll, no sabía que esta función no tenía el alcance adecuado.

Lo arreglé agregando una expresión de función invocada Inmediatamente .

Answer 2

No usaría la ID de un back-end como propiedad clave en React. Si lo hace, confía en una lógica que está un poco alejada de su componente para asegurarse de que sus claves sean únicas. Si las teclas no son únicas, puedes romper la representación de las reacciones, por lo que es bastante importante.

Esta es la razón por la que, en mi opinión, debería limitarse a usar el índice dentro de un ciclo for o similar a establecer las propiedades clave. De esta forma, usted sabe que nunca pueden ser únicos, y es la manera más simple de hacer exactamente eso.

Sin saber exactamente cómo funcionan sus identificaciones, es imposible decir qué está causando el conflicto no exclusivo aquí. Sin embargo, dado que la key es solo para permitir que React identifique elementos correctamente, y nada más, realmente no tiene sentido que sea algo más que un simple recuento o índice.

var children = [];
for (var i=0; i<yourArray.length; i++) {
    children.push(
        <div key={i}>{yourArray[i].someProp}</div>
    );
}