alguien podria explicarme como solucionar este error
Advertencia: flattenChildren (...): se encontraron 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> ); } });Como pregunta secundaria, estoy bastante seguro de que se supone que mi restablecimiento restablece los valores de los cuadros de selección, pero esto tampoco funciona y solo restablece los resultados renderizados. ¿No estoy seguro de si esto está relacionado con el primer problema?
Cualquier ayuda muy apreciada
No es una buena idea usar el índice como clave. Una clave es lo único que React usa para identificar elementos DOM. ¿Qué sucede si empuja un elemento a 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á mapeando como clave. Algo como <option key={value.id}> o, si no existe una clave, cree un identificador único haciendo algo como <option key={value.name + value.description}> .
Agregar el índice como valor solucionó 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>Soy un gran fanático de usar la clave combinando el índice con algún 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 sabiendo para qué componente es. Por ej. <ComponentA key={'compoent-a-'+i} /> . Además, sigo este enfoque porque la convención html simple coincide como damos id="my-some-of-the-id" o algo así.
Por lo tanto, incluso si desea usar el nombre y la descripción como clave, puede usar algo así:
key={'some-constant-'+value.name+'-'+value.description}Esto es solo una opinión. Sin embargo, sigo la convención html cuando escribo el valor de los accesorios.