Recibo el error "cada niño en una lista debe tener un accesorio de 'clave' único", pero estoy confundido porque estoy intentando configurar la clave para una identificación única, y parece que no está funcionando. Estoy usando imdbID como clave, que debe ser un valor de clave principal (único y estable). ¿Mi sintaxis es incorrecta o qué estoy haciendo que es incorrecto aquí?
import React from 'react'; import "./movie.css"; class Movie extends React.Component { render() { const {Title, Poster, Year, imdbID} = this.props; return ( <div className="movie" key={imdbID} id={imdbID}> <div className="title-year"> <h1 className="title">{Title}</h1> <h2 className="year">{Year}</h2> </div> <div className="poster"> <img src={Poster} alt="my movie poster"/> </div> </div> ) } } export default Movie;Y aquí está el código que inserta <Movie...> en la aplicación (app.js):
render() { return ( <div className="App"> <header className="App-header"> <Search handleSendRequest={this.sendRequest}/> <div className="response"> { this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => { return <Movie {...movie}/> }) : null } </div> </header> </div> ); }Agregue un atributo key a sus etiquetas de película y establezca un valor único. Como a continuación
{ this.state.movies && this.state.movies.length ? this.state.movies.map((movie, index) => { return <Movie key={movie.imdbID} { ...movie } /> }) : null }Necesita la clave en <Movie/> en sí:
{ this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => { return <Movie key="HERE" {...movie}/> }) : null } En particular, necesita una clave cada vez que itera sobre un objeto. En este caso, está iterando sobre this.state.movies .
No necesita la clave dentro de la función de procesamiento de Movie, donde la colocó, porque no está iterando sobre ningún objeto en ese momento.
El accesorio 'clave' debe insertarse en el componente <Movie/> , no en el div dentro de él.