Реакция: Передача объекта в состояние - PullRequest
Новая
       8

Реакция: Передача объекта в состояние

0 голосов
/ 01 февраля 2019

Я пытаюсь создать копию Spotify Web Player с помощью Spotify Web API.Прямо сейчас я пытаюсь установить activePlaylist с обработчиком события onClick.Однако, когда я передаю свой объект списка воспроизведения в метод обработчика событий, объект не определен.Я пытался исправить это в течение длительного времени.Есть ли у вас какие-либо советы?

ПРИМЕЧАНИЕ: он будет хорошо отображать имена на странице, но объект становится неопределенным, когда я передаю его методу обработчика событий.

Вот мой код: 

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;

1 Ответ

0 голосов
/ 01 февраля 2019

Вы захотите связать контекст, чтобы иметь доступ к классу.Вот как это может выглядеть следующим образом:Я разбил логику просто для удобства чтения.

Кроме того, вы пытались переопределить параметр события с тем же именем, что и переданная переменная - таким образом, "список воспроизведения" был объектом события, а не объектом, который вы ожидали "

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

Вы можете увидеть демо здесь: 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;

Также убедитесь, что вы связали setActivePlaylist в конструкторе или сделали его функцией стрелки

...