React：将对象传递给状态

Posted 2023-04-15

【中文标题】React：将对象传递给状态

【英文标题】：React: Passing an object to state

【发布时间】：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 回调的那个

【参考方案1】：

您会希望这样你就可以访问类绑定的上下文。下面是它可能是什么样子剪断以下。我分开了逻辑仅为可读性。

此外，你试图覆盖该事件的参数具有相同的名称作为传递变量 - 从而“播放列表”是在事件对象，而不是您所期望”的对象 P>

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在构造函数或使其箭头功能 P>