Réagissez : Passage d'un objet à l'état

Question

J'essaie de faire une réplique du lecteur Web de Spotify en utilisant l'API Web de Spotify. Pour l'instant, j'essaie de définir la liste de lecture active avec un gestionnaire d'événement onClick. Cependant, lorsque je passe mon objet playlist à la méthode du gestionnaire d'événement, l'objet est indéfini. J'ai essayé de résoudre ce problème depuis longtemps. Avez-vous des conseils à me donner ?

REMARQUE : les noms sont bien mis en correspondance avec la page, mais l'objet devient indéfini lorsque je le passe à la méthode du gestionnaire d'événement.

Voici mon code :

import React, { Component } from 'react';
import '../css/playlists.css';

class Playlists extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activePlaylist: null
    };
  }

  setActivePlaylist(playlist) {
    console.log('From setActivePlaylist');
    console.log(playlist.name); //this logs as undefined
  }

  render() {
    const {playlists} = this.props;

    return(
      <div className='playlists'>
        <h4 id='playlist-label'>Playlists</h4>
        {this.props.playlists
          ?
          (this.props.playlists.items.map((playlist, index)=>
            <a href="#" onClick={(playlist) => this.setActivePlaylist(playlist)}>
              <h4
              key={index}
              >
                {playlist.name}
              </h4>
            </a>
          ))
          :
          (<h4>Loading playlists...</h4>)
        }
      </div>
    );
  }
}

export default Playlists;

Answer 1

Vous voudrez lier le contexte pour avoir accès à la classe. Voici à quoi cela pourrait ressembler. J'ai séparé la logique simplement pour la lisibilité.

De plus, vous avez essayé de remplacer le paramètre de l'événement par le même nom que la variable transmise - ainsi "playlist" était l'objet de l'événement, et non l'objet que vous attendiez".

onClick={/* this be no good-->*/ (**playlist**) => this.setActivePlaylist(playlist)}

Vous pouvez voir une démo ici : https://stackblitz.com/edit/react-passing-an-object-to-state?file=Playlists.js

import React, { Component } from 'react';

class Playlists extends Component {

  constructor(props) {
    super(props);

    this.state = {
      activePlaylist: null
    };

    // Need to bind the scoped context so we have access to "Playlists" component.
    this.renderLink = this.renderLink.bind(this);
  }

  setActivePlaylist(playlist) {
    console.log('From setActivePlaylist');
    console.log(playlist.name);
  }

  render() {
    const {items} = this.props.playlists

    return(
      <div className='playlists'>
        <h4 id='playlist-label'>Playlists</h4>
        {items
          ? items.map(this.renderLink)
          : <h4>Loading playlists...</h4>
        }
      </div>
    );
  }

  renderLink(playlist, index) {
    return (
      <a onClick={() => this.setActivePlaylist(playlist)}>
        <h4 key={index}>
            {playlist.name}
          </h4>
        </a>
    );
  }
}

export default Playlists;

Assurez-vous également de lier setActivePlaylist dans le constructeur ou d'en faire une fonction flèche.