0
114
VistasEtiquetas que no se representan en React
const Albums = ({artist, album, textBarInput}) => { let indexOfTheArtist = takeTheIndexOfTheArtist(artist); // -1 means not found | >= 0 means found and return his position let artistAlbums = bands[indexOfTheArtist].albums for(let i = 0; i < artistAlbums.length; i+=1){ return( <Record spotifyLink={artistAlbums[i].spotifyLink} imageLink={artistAlbums[i].imageLink} title={artistAlbums[i].title} releaseDate={artistAlbums[i].releaseDate}></Record> ); } } const Record = ({spotifyLink, imageLink, title, releaseDate}) => { return( <a href={spotifyLink} rel='noreferrer' target='_blank'><img src={imageLink} alt={title}></img></a>, <p>{title}</p>, <p>Release Date: {releaseDate}</p> ); } export default AlbumsHola, estoy trabajando en un proyecto personal que es una galería de música usando React. Así que tengo dos opciones de selección (una para artistas y otra para álbumes) y una barra de entrada para que el usuario pueda escribir el artista que quiere y obtener los álbumes de esa banda. También tengo una matriz de bandas con nombre en la que cada entrada es un diccionario con el nombre del artista (artista) y también un diccionario con todos los álbumes de esa banda con datos como la fecha de lanzamiento, el enlace de Spotify y una fuente de imagen de la portada del álbum. Como puede ver en mi componente Álbumes, recibo como accesorios la entrada del usuario, pero cuando paso estos valores al componente Grabar, lo único que aparece en la página es el párrafo de la fecha de publicación. ¿Me estoy perdiendo de algo?
1 Respuestas
Responde la pregunta0
Estoy bastante seguro de que el problema es que los datos no se actualizan correctamente. intente agregar un estado que contenga a su artista actual, y luego, para cada registro, simplemente pase los datos del estado. algo como esto:
- agregue un estado en su componente principal:
const [currentArtist, setCurrentArtist] = useState({}); - use
setCurrentArtistdespués de elegir el artista correcto, - agregar registro para cada álbum como este:
{currentArtist.albums.map((album) => <Record {...album} />)}asegúrese de que el objeto del artista en el estado tenga claves con los nombres de los accesorios. Debe tener un aspecto como este:
{ spotifyLink: '.../.../', imageLink: '.../.../', title: 'Song Title' ...}al hacerlo, puede distribuir el elemento del álbum como un accesorio (ejemplo en el código) y no necesita pasar los accesorios uno por uno.