5

Problema em renderizar meu state sempre da o erro:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of Main. See https://fb.me/react-warning-keys for more information.

in li (at main/index.js:42)
in Main (at App.js:14)
in header (at App.js:12)
in div (at App.js:10)
in App (at src/index.js:7)

code:

**

render(){     
    return( 
        <ol className="planetas-list">
            {this.state.Planetz.map(planetas =>(                
                <li key={planetas.lista}> 
                    {planetas.PlanetzClima} 
                </li>                   
         ))}
        </ol>  
    )
  }
}

**

Poderiam me dizer o que está acontecendo ? Ja procurei bastante no overflow mas mesmo assim não consegui resolver... vlw!

2 Respostas 2

15

É um problema comum. Todos os itens de uma lista renderizada deve conter uma propriedade chamada key e ela deve ser única( ou seja, não pode ter outra key igual).

Eu vi que no seu código você colocou <li key={planetas.lista}>, mas é provável que não seja única.

Tenta colocar o ID de cada item ai.

Em último caso vc pode usar o index:

render(){     
  return( 
      <ol className="planetas-list">
          {this.state.Planetz.map((planetas, index) =>(                
              <li key={index}> 
                  {planetas.PlanetzClima} 
              </li>                   
       ))}
      </ol>  
  )
}
}

Mas não é recomendado pelo Facebook:

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Você pode dar uma olhada na documentação para saber mais detalhes: https://pt-br.reactjs.org/docs/lists-and-keys.html

Boa sorte!

5
  • Obrigado irmão! to quebrando a cabeça aqui mas vou me aprofundar na doc do react e qualquer dúvida eu posto aqui, se alguém puder responder fico grato! 6/06/2019 às 19:48
  • 1
    você verificou se o planetas.lista é um valor único? 6/06/2019 às 20:06
  • Consegui resolver retirando do meu state todos os {} que estavam se repetindo e adicionando id's únicos a cada propriedade que eu chamei no render. vlw rapaziada! 7/06/2019 às 0:19
  • 1
    Alguém sabe explicar porque esse warning é acusado ao usar a função .map() sem atribuir a propriedade key e não quando se cria uma <View> diretamente (também sem especificar a key)?
    – regisls
    31/01/2021 às 17:28
  • Não entendi muito bem a pergunta, vou tentar responder. Key é um atributo string especial que você precisa definir ao criar listas de elementos. Os keys ajudam o React a identificar quais itens sofreram alterações, foram adicionados ou removidos. As chaves devem ser atribuídas aos elementos dentro do array para dar uma identidade estável aos elemento. 9/02/2021 às 17:15
-2

No meu caso, resolvi da seguinte maneira com Typescript, mas da quase no mesmo! (No componente pai):

const App = () => {
const [selectPriority, setSelectPriority] = useState("")


const alternarPrioridades = (priority?: any) => {
    setSelectPriority(priority)
}

return (
    <div className="container">
      <div className="page-wrapper">

        {showAddEditModal ? (
          <Modal children={ AddEditTaskForm(selectPriority, alternarPrioridades) } />
        ) : null }
        
      </div>
    </div>
)
}
export default App

No componente filho:

const AddEditTaskForm = (selectPriority: string, alternarPrioridades: (priority?: any) => void) => {

return (
    <ul className="priority-buttons">
        {["high", "medium", "low"].map((priority) => {

        if (selectPriority === priority) {           <------- A MÁGICA PARA FAZER SELECIONAR SOMENTE AQUELE QUE O USUÁRIO CLICAR ESTÁ NESSE IF-ELSE
          return (
          <li key={priority} className={classNames(`${selectPriority}-selected`, priority)} onClick={ (e) => alternarPrioridades(priority)}>
            {priority}
          </li>
          )
        }else {
          return (
          <li key={priority} className={classNames(``, priority)} onClick={ (e) => alternarPrioridades(priority)}>
            {priority}
          </li>
          )
        }

        })}
    </ul>
)

export default AddEditTaskForm

Claro que o código fica um pouco grande, mas esta foi a única forma que encontrei para resolver este problema!

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .