javascript - isclearable - react-bootstrap-select

Reaccionar Advertencia: flattenChildren(…): Encontró a dos niños con la misma llave

Question

¿Podría alguien explicar cómo solucionar este error?

Advertencia: flattenChildren (...): Se encontraron con dos niños con la misma llave

He replicado mi código a continuación, pero por alguna razón, CodePen no muestra el error.

var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},

render: function() {

return (
  <div className="filter-options">
    <div className="filter-option">
      <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, ''product'')}>
      <option value=''''>Product</option>
      {this.props.productOptions.map(function(option) {
        return (<option key={option}  value={option}>{option}</option>)
      })}
      </select>
  </div>
  </div>
 );
 }
 });

Codepen

Como una pregunta secundaria, estoy bastante seguro de que mi restablecimiento debe restablecer los valores de los cuadros de selección, pero esto tampoco funciona y solo se restablecen los resultados presentados, ¿no estoy seguro de si esto está relacionado con el primer problema?

Cualquier ayuda muy apreciada

Answer 1

Agregando el índice como valor arreglado esto. Gracias @azium por tu sugerencia.

  <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, ''product'')}>
      <option value=''''>Product</option>
      {this.props.productOptions.map(function(option, value) {
        return (<option key={value}  value={option}>{option}</option>)
      })}
      </select>

Answer 2

No es una buena idea usar el índice como la clave. Una clave es lo único que React utiliza para identificar los elementos DOM. ¿Qué sucede si inserta un elemento en la lista o elimina algo en el medio? Si la clave es la misma que antes, React asume que el elemento DOM representa el mismo componente que antes. Pero eso ya no es cierto. De: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Es mucho mejor usar una cadena única de cada elemento que está asignando como clave. Algo como <option key={value.id}> o si una clave no existe, crea un identificador único haciendo algo como <option key={value.name + value.description}> .

Answer 3

Soy un gran fan de usar clave combinando índice con un valor constante en lugar de usar key={value.name + value.description} :

key={''some-constant-value''+index}

Esto se debe a que puedo pasar la clave a sabiendas para qué es. Por ejemplo. <ComponentA key={''compoent-a-''+i} /> . Además, sigo que este enfoque se debe a que las simples convenciones html coinciden con que damos id="my-some-of-the-id" o algo así.

Entonces, incluso si desea usar el nombre y la descripción como la clave, puede usar así:

key={''some-constant-''+value.name+''-''+value.description}

Esto es sólo una opinión. Sin embargo, sigo la convención html cuando escribo props value.