Javascript React-TypeError:无法读取属性'；renderSidebaritem'；未定义的

React-TypeError:无法读取未定义的属性“renderSidebaritem”。 （匿名函数）

我已经对引起问题的行进行了评论。这似乎与“this”的绑定有关。我尝试在侧边栏类的构造函数中绑定“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')
);

从“React”导入React；
从“react dom”导入react dom；
从“/pokemon.min.json”导入数据；
导入“./index.css”；
类Sidebaritem扩展了React.Component{
render（）{
返回(
this.props.onClick（）}>
{this.props.pokename}
);
}
}
类侧栏扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.renderSidebaritem=this.renderSidebaritem.bind（this）；
}
renderSidebaritem（名称）{
返回(
警报（'你点击了我'）}
/>
);
}
render（）{
返回(
POKEDEX

{
数据映射（功能（poke）{
此.renderSidebaritem（poke.pokemon）/
此
的上下文与您预期的不同。在您的情况下，
此
没有
renderSidebaritem
，因为它位于匿名函数的上下文中，而不是您的组件类（
此
未定义

）

解决方案是使用箭头函数而不是常规函数。箭头函数不创建新上下文，而是使用周围的上下文-

此

将是该类的实例

data.map(poke => this.renderSidebaritem(poke.pokemon))

---

在数据映射中，您没有使用箭头函数，所以它有自己的“this”范围。所以即使您绑定它，它也不会工作。 您可以改为使用箭头函数，或者创建一个变量来存储边栏类的“this”

render(){
    return (
        <div className="sidebar">
            <h1>POKEDEX</h1>
            <hr/>
            {
              data.map((poke) => {
                this.renderSidebaritem(poke.pokemon)
              })
            }
        </div>
    );
}

render（）{
返回(
POKEDEX

{
data.map（（戳）=>{
this.renderSidebaritem（poke.pokemon）
})
}
);
}

或

const sidebarThis=this；
render（）{
返回(
POKEDEX

{
data.map（（戳）=>{
侧栏这是一个渲染器（poke.pokemon）
})
}
);
}

如果不想使用箭头功能，可以使用

bind

：

data.map(function(poke){
  this.renderSidebaritem(poke.pokemon) // <- This line causes the issue. 
}.bind(this))

data.map（函数（poke）{
this.renderSidebaritem（poke.pokemon）/在侧地图函数中使用的“this”属于该函数的范围，而不属于该类的范围。请使用箭头函数或内联绑定（）。
render（）{
返回(
POKEDEX

{
data.map（poke=>{this.renderSidebaritem（poke.pokemon）}）
}
);
}

render（）{
让自我=这个；
返回(
POKEDEX


{
数据映射（功能（戳、键）{
自我评价（poke.title）；
})
}

);
}
data.map(function(poke){
  this.renderSidebaritem(poke.pokemon) // <- This line causes the issue. 
}.bind(this))

render(){
   return (
       <div className="sidebar">
           <h1>POKEDEX</h1>
           <hr/>
           {
             data.map(poke => { this.renderSidebaritem(poke.pokemon) })
           }
       </div>
   );
}