React：将对象传递给状态答案

【问题标题】：React: Passing an object to stateReact：将对象传递给状态
【发布时间】：2019-06-25 13:39:26
【问题描述】：

我正在尝试使用 Spotify Web API 制作 Spotify Web Player 的副本。现在，我正在尝试使用 onClick 事件处理程序设置 activePlaylist。但是，当我将播放列表对象传递给事件处理程序方法时，该对象是未定义的。我已经尝试解决这个问题很长时间了。你有什么建议吗？

注意：它将名称映射到页面就好了，但是当我将对象传递给事件处理程序方法时，它变得未定义。

这是我的代码：

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;

【问题讨论】：

您可以尝试将标签包装在
中，然后为 div 提供相同的 onClick 处理程序吗？
可能不是原因，但您应该在构造函数中绑定方法 - this.setActivePlaylist = this.setActivePlaylist.bind(this);
@yourfavoritedev 刚刚做到了！结果是一样的。
试试这种方式onClick={() => this.setActivePlaylist(playlist)}通过闭包访问播放列表参数
@JaredMoats 因为函数作用域和参数，当你点击某个东西时，会调用一个回调函数，在这种情况下是(playlist) => this.setActivePlaylist(playlist)，但按钮上下文中不存在“播放列表”参数，所以“未定义”值进入“setActivePlaylist”函数，onClick={() => this.setActivePlaylist(playlist)} 使用此代码时，javascript 使用创建的闭包来访问播放列表参数，传递给 .map 回调的那个

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;