1

No logro encontrar donde se esta reproduciendo esta advertencia ni porque, alguna idea?

import React from 'react';
import logo from '../../../raw-assets/svg/logo.svg';
import line from '../../../raw-assets/svg/line.svg';
import 'whatwg-fetch'; 
import {backendURL, backendPort} from '../../components/connect.js';
if(process.env.NODE_ENV == 'production'){
var backend = "";
}else{
  var backend = backendURL +':'+ backendPort;
}
import isMobile from 'ismobilejs';
var Menu = require('react-burger-menu').slide;

class ResponsiveHeader extends React.Component {

	constructor() {
    super();
    this.state = {
      categories: [],
      mobile: 'span',
    }
  }

  componentDidMount() {
    fetch(backend+'/api/categories')
    .then(result => result.json())
    .then(categories => {this.setState({categories});
  });
  }

  selectKey(event) {  
    this.setState({ exampleState: event.target.value });
  }

  render() {
    if(!isMobile.any){
      var control = 'logosection';
    }else{
      var control = 'logosection-mobile';
    }
    
     return ( 
       
      <div className="header">
        <div className={control}>
        <div className="logo" dangerouslySetInnerHTML={{ __html: xxx }} />
        <div className="line" dangerouslySetInnerHTML={{ __html: line }} />
        <div className="labs">LABS</div>
      </div>

{isMobile.any &&
       
        <Menu right={1}>
    <div className="check-sidebar">
 <ul>
       <div className="languages-header">
      <p>CODE LANGUAGES:</p>
      </div>
      {
      this.state.categories.map(c =>
<li className="checkbox">
            <input id={c.id} type="checkbox" onChange={this.onChange.bind(this)} value={c.id}/>
            <label htmlFor={c.id}></label>
            <tag>{c.name}</tag>
</li>
          )
        }
</ul>
</div>


        </Menu>

      }

   
{!isMobile.any &&
      <div className="check">
      <div className="languages-header">
      CODE LANGUAGES:
      </div>
      {
      this.state.categories.map(c =>
<span className="checkbox">
            <input id={c.id} type="checkbox" onChange={this.onChange.bind(this)} value={c.id}/>
            <label htmlFor={c.id}></label>
            <tag>{c.name}</tag>
</span>
          )
        }
      </div>
       }
      </div>

    );
   }
   onChange (e) {
    this.context.applyFilters(parseInt(e.target.value));
  }

}

ResponsiveHeader.contextTypes = {
  applyFilters: React.PropTypes.func
};


export default ResponsiveHeader;

introducir la descripción de la imagen aquí

2 respuestas 2

1

La importancia de esto, es que recordemos que React usa un virtual DOM para luego hacer un diff con el DOM real, y conocer que elemento fue actualizado.

Que tiene que ver todo esto con los Key??? Si no le colocas un key al momento de generar el listado y haces un cambio a algun de los hijos el virtual DOM entendera que hiciste un update a todos y los re-renderizara, por esto es necesario colocar un key, para ayudarlo y ganar tiempo de performance.

Como dice Alejandro, con tan solo colocar un key = {{algunvalornorepetido}} se soluciona.

4
  • Mhm es posible Wilfredo, tu te refieres a por ejemplo en el array.map donde hago un listado de checkboxes? Ahi deberia ponerle un key a? Commented el 23 mar. 2017 a las 19:18
  • @SantiagoD'Antuoni Si en cada uno de los .map deberias tener un key.
    – Wilfredo
    Commented el 23 mar. 2017 a las 19:21
  • Algo como esto? <span className="checkbox" key={randomnumber}> Commented el 23 mar. 2017 a las 19:37
  • @SantiagoD'Antuoni Si, pero recuerda que es un randomnumber que no se repita.
    – Wilfredo
    Commented el 23 mar. 2017 a las 19:45
0

Este error ocurre cuando estas creando un listado de elementos en react y no les agregas un "key" diferente para cada uno de ellos, según recuerdo.

creo que ResponsiveHeader esta agregando elementos dentro de si mismo, tiene meses que no toco react, pero si vas a crear componentes hijos asegurate de que cada hijo tenga un "key" similar a

key = {{algunvalornorepetido}}

Para cada uno de los elementos hijos que crees dentro de ese Componente

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.