Avoir un problème avec e.target.value renvoyant Undefined dans React

Question

J'ai une fonctionnalité où vous pouvez cliquer sur un img et voir une liste de noms qui sont cliquables .... quand vous cliquez sur un nom, cette image de personnes devrait prendre la place de l'img original. Im travaillant avec un artiste api et plutôt que moi obtenant une erreur dans la console, l'image change en img d'un artiste dont le nom est «indéfini» ... étrange. pourrait ne pas être une énorme solution, mais j'ai été tourmenté par ce problème depuis un certain temps maintenant.

searchForArtist(query) { 
    request.get(`https://api.spotify.com/v1/search?q=${query}&type=artist`) 
     .then((response) => { 
     const artist = response.body.artists.items[0]; 
     const name = artist.name; 
     const id = artist.id; 
     const img_url = artist.images[0].url; 
     this.setState({ 
      selectedArtist: { 
      name, 
      id, 
      img_url, 
      }, 
     }); 
     }) 
     .then(() => { 
     this.getArtistAlbums(); 
     }) 
     .catch((err) => { 
     console.error(err); 
     }); 
    } 

    getSubsequentCollabs(artist) { 
    this.setState({ 
     selectedArtist: {}, 
     selectedAlbums: {}, 
     artistCounts: {}, 
    }); 
    console.log(artist); 
    this.searchForArtist(artist); 
    } 

    artistOnClick(e) { 
    console.log(e); 
    let artist = e.target.value; 
    this.getSubsequentCollabs(artist); 
    } 

J'ai une autre composante faire:

const Artist = ({name, artistOnClick}) => { 
    return (
    <div name={name} onClick={artistOnClick}> 
     {name} 
    </div> 
) 
} 

export default Artist; 

Answer 1

Un élément div ne comporte pas d'attribut de valeur, et donc rien ne peut être passé à travers à l'arrière d'un objet d'événement pour ce clic particulier un événement.

Selon ce que vous attendez d'arriver, vous pouvez l'aborder en faisant quelque chose comme:

const Artist = ({name, artistOnClick}) => { 
    return (
    <div onClick={() => artistOnClick(name)}> 
     {name} 
    </div> 
) 
} 

export default Artist; 

Answer 2

event.target vous donnera l'élément cible HTML. Javascript fera de tous les attributs du nœud une propriété de event.target.

Par exemple:

<div id="hello">Hello</div> 

e.target.id //returns 'hello' 

Il y a des cas particuliers comme inputs où la propriété value en implicite. Mais, pour les autres éléments HTML, vous devez spécifier les attributs explicitement.

Donc, vous devriez être HTML comme ceci

const Artist = ({name, artistOnClick}) => { 
    return (
    <div value={name} onClick={artistOnClick}> 
     {name} 
    </div> 
) 
} 

e.target.value //return the name 

OU

const Artist = ({name, artistOnClick}) => { 
    return (
    <div onClick={() => artistOnClick(name)}> 
     {name} 
    </div> 
) 
} 

e.target.name //returns the name 

Hope this helps!