javascript - react - 类型错误 : Cannot read property 'renderSidebaritem' of undefined

Question

React - 类型错误:无法读取未定义的属性“renderSidebaritem”。 (匿名函数)

我已经评论了导致问题的行。看来这和‘这个’的束缚有关。我尝试在 Sidebar 类的构造函数中绑定(bind)“this”，但这似乎没有解决问题。

import React from 'react';
import ReactDOM from 'react-dom';
import data from './pokemon.min.json';
import './index.css';

class Sidebaritem extends React.Component{
    render(){
        return (
            <div className="pokemon" onClick = { () => this.props.onClick() } >
                {this.props.pokename}
            </div>
        );
    }
}

class Sidebar extends React.Component{
    constructor(props, context){
        super(props, context);
        this.renderSidebaritem = this.renderSidebaritem.bind(this);
    }

    renderSidebaritem(name){
        return (
            <Sidebaritem 
                pokename = {name} 
                onClick = { () => alert('You clicked me.') }
            />
        );
    }

    render(){
        return (
            <div className="sidebar">
                <h1>POKEDEX</h1>
                <hr/>
                {
                  data.map(function(poke){
                    this.renderSidebaritem(poke.pokemon) // <- This line causes the issue. 
                  })
                }
            </div>
        );
    }
}

class Pokedescription extends React.Component{
    render(){
        return (
            data.map(function(poke){
                if(poke.id == 5){
                    return (
                        <div className="poke-description-wrapper">
                            <h1 className="poke-name">{poke.pokemon} (#{poke.id})</h1>
                            <div className="poke-image">
                                <img src={poke.url_image} alt={poke.pokemon}/>
                            </div>
                            <div className="poke-meta-description">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td><b>Height:</b> <span className="poke-data">{poke.height}</span></td>
                                            <td><b>Weight:</b> <span className="poke-data">{poke.weight}</span></td>
                                        </tr>
                                        <tr>
                                            <td><b>Type1:</b> <span className="poke-data">{poke.type_1}</span></td>
                                            <td><b>Type2:</b> <span className="poke-data">{poke.type_2}</span></td>
                                        </tr>
                                        <tr>
                                            <td><b>Attack:</b> <span className="poke-data">{poke.attack}</span></td>
                                            <td><b>Defense:</b> <span className="poke-data">{poke.defense}</span></td>
                                        </tr>
                                        <tr>
                                            <td><b>HP:</b> <span className="poke-data">{poke.hp}</span></td>
                                            <td><b>Speed:</b> <span className="poke-data">{poke.speed}</span></td>
                                        </tr>
                                        <tr>
                                            <td><b>Ability 1:</b> <span className="poke-data">{poke.ability_1}</span></td>
                                            <td><b>Ability 2:</b> <span className="poke-data">{poke.ability_2}</span></td>
                                        </tr>
                                        <tr>
                                            <td><b>Pokebase:</b> <span className="poke-data">{poke.pokebase}</span></td>
                                            <td><b>Pokedex entry:</b> <a href={poke.pokedex}> <span className="poke-data">{poke.pokemon}</span></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    );
                }
            })

        );
    };
}


class Maincontent extends React.Component{
    renderPokedesc(id){
        return (<Pokedescription pokeid = {id} />);
    }

    render(){
        return (
            <div className="maincontent">
                {this.renderPokedesc(10)}
            </div>
        );
    };
}


class Pokedex extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        pokemon_id: 1
    };
  }

  renderSidebar(){
    return (
        <Sidebar />
    );
  }

  renderMaincontent(){
    return (
        <Maincontent />
    );
  }

  render() {
    return (
        <div className="pokedex-wrapper">
            {this.renderSidebar()}
            <div className="main-content-wrapper">
            {this.renderMaincontent()}
            </div>
        </div>
    );
  }
}


ReactDOM.render(
    <Pokedex />,
    document.getElementById('root')
);

Answer 1

render() {
    let self = this;
    return (
      <div className="sidebar">
        <h1>POKEDEX</h1>
        <hr />
        <ul>
          {
            data.map(function (poke, key) {
              self.renderSidebaritem(poke.title);
            })
          }
        </ul>
      </div>
    );
  }