Javascript 反应：将对象传递给状态

我正在尝试使用SpotifyWebAPI制作SpotifyWebPlayer的副本。现在，我正在尝试使用onClick事件处理程序设置activePlaylist。但是，当我将playlist对象传递给事件处理程序方法时，该对象是未定义的。我已经试着解决这个问题很久了。你有什么建议吗

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

这是我的密码：

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;

import React，{Component}来自'React'；
导入“../css/playlists.css”；
类播放列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
activePlaylist:空
};
}
setActivePlaylist（播放列表）{
log（'From setActivePlaylist'）；
console.log（playlist.name）；//此记录为未定义
}
render（）{
const{playlists}=this.props；
返回(
播放列表
{this.props.playlists
?
（此.props.playlists.items.map（（播放列表，索引）=>
))
:
（正在加载播放列表…）
}
);
}
}
导出默认播放列表；

您需要绑定上下文，以便能够访问该类。这是它可能看起来像以下剪掉。为了便于阅读，我打破了逻辑

此外，您试图用与传入变量相同的名称覆盖事件的参数，因此“playlist”是事件对象，而不是您期望的对象

您可以在此处看到演示：

import React，{Component}来自'React'；
类播放列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
activePlaylist:空
};
//需要绑定作用域上下文，以便我们可以访问“播放列表”组件。
this.renderLink=this.renderLink.bind（this）；
}
setActivePlaylist（播放列表）{
log（'From setActivePlaylist'）；
console.log（playlist.name）；
}
render（）{
const{items}=this.props.playlists
返回(
播放列表
{项目
？items.map（this.renderLink）
：正在加载播放列表。。。
}
);
}
renderLink（播放列表、索引）{
返回(
this.setActivePlaylist（playlist）}>
{playlist.name}
);
}
}
导出默认播放列表；

---

另外，请确保在构造函数中绑定setActivePlaylist或使其具有箭头功能

是否可以尝试将标记包装在一个数组中，然后为div指定相同的onClick处理程序？可能不是原因，但应该绑定构造函数中的方法-this.setActivePlaylist=this.setActivePlaylist.bind（this）；@yourfavoritedev刚刚做到了！结果是一样的。通过以下方式尝试

onClick={（）=>this.setActivePlaylist（playlist）}

通过closure@JaredMoats由于函数范围和参数的原因，当您单击某个对象时，将调用回调函数，在本例中为

（播放列表）=>this.setActivePlaylist（playlist）

但按钮上下文中不存在“playlist”参数，因此“setActivePlaylist”函数中有一个“未定义”值，

onClick={（）=>this.setActivePlaylist（playlist）}

使用此代码时，javascript使用创建的闭包访问playlist参数，即传递到.map回调中的参数

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

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;