J'ai codé dur le tableau suivant nommé SearchResults Juste pour tester:
import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';
function TrackList({ searchResults, playlistName, playlistTracks, onAdd, onRemove, isRemoval }) {
return (
<div className="TrackList">
{searchResults.map(track => <Track key={track.id} track={track} onAdd={onAdd} onRemove={onRemove} isRemoval={isRemoval} />)}
</div>
);
}
export default TrackList;
3 Réponses :
Vous devez vérifier avant de rendre
function TrackList({ searchResults, playlistName, playlistTracks, onAdd, onRemove, isRemoval }) {
return ({typeof searchResults !== 'undefined' &&
<div className="TrackList">
{searchResults.map(track => <Track key={track.id} track={track} onAdd={onAdd} onRemove={onRemove} isRemoval={isRemoval} />)}
</div>
});
}
Pas utile, SearchResults est initialisé en tant que tableau.
@ Lawrence-Witt l'avez-vous essayé? En raison de l'asynchronicité de réaction et de JS, le premier appel que l'état n'aura pas de valeur de valeur.
a trouvé le problème, merci pour tous ceux qui ont essayé d'aider le nouveau venu ici.
TrackList a 2 composants parent, rechercherRésultats et liste de lecture. Je faisais passer les États searchsults et la liste de lecture avec des noms différents et mapper uniquement la matrice de rechercheRésultats.
Donc, il s'agissait simplement d'avoir le même nom pour les deux accessoires avant d'atteindre la liste de suivi, que j'ai nommé pistes .
Dans mon composant de playlist: et dans mon composant SearchResults: Donc, ils arrivent tous les deux dans une trackliste comme {pistes.map (piste =>
<div className="TrackList">
{searchResults && searchResults.length && searchResults.map(track => <Track key={track.id} track={track} onAdd={onAdd} onRemove={onRemove} isRemoval={isRemoval} />)}
</div>
Pls ajoutez une certaine description à votre réponse et expliquez comment cela fonctionne et résout le problème.
Pouvez-vous inclure également votre code de composant SearchResults Tous les composants entre celui-ci et
TrackList où l'erreur se produit?Ajouter un rendu conditionnel. La rechercheResult n'est pas encore initialisée lorsque vous essayez de le rendre.
Hey Drew, j'ai édité la question de mieux maintenant.
@yazou mais j'ai déjà déclaré sa valeur là-bas, avant d'entrer.
Tout va bien, et semble fonctionner comme prévu ici dans ce Sandbox . Peut-être qu'il y a plus de choses sur ce n'est pas dans l'un de vos extraits. Il est possible
setsearchResults définit l'état à autre chose qu'un tableau. Pouvez-vous partager une codesandbox en cours qui reproduit le problème?@ Drewreese a raison, j'ai aussi essayé dans mon éditeur et ça fonctionne bien
@ Drewreee second, je soupçonne qu'il a un crochet de cycle de vie entre l'état et la déclaration de retour (voir
........ ci-dessus) qui met à jour l'état peut-être. Op, pouvez-vous partager l'extrait de code complet?Salut les gars, merci pour les commentaires rapides. J'ai ajouté les composants entiers maintenant à la question. N'a pas ajouté en premier lieu car je pensais que ce serait trop long, mais déjà mis à jour là-bas.
SearchResult && SearchResult.map, soyez soigneusement ce que les accessoires rendent la première fois que cela ne comprend pas que c'est une matrice.