未捕获（承诺）TypeError：无法读取未定义的属性“ renderMenu”

Question

I want to create a dynamic menu according to the json like this:

[
  {
    "teamId": "10000",
    "teamName": "笑傲江湖",
    "superTeamId": "",
    "createTime": "2017-06-25T06:07:45.000Z",
    "createUserId": null
  },
  {
    "teamId": "10001",
    "teamName": "计算机系",
    "superTeamId": "10000",
    "createTime": "2017-06-25T06:07:45.000Z",
    "createUserId": null
  },
  {
    "teamId": "10002",
    "teamName": "电子系",
    "superTeamId": "10000",
    "createTime": "2017-06-25T06:07:45.000Z",
    "createUserId": null
  },
  {
    "teamId": "10003",
    "teamName": "中文系",
    "superTeamId": "10000",
    "createTime": "2017-06-25T06:07:45.000Z",
    "createUserId": null
  },
  {
    "teamId": "10004",
    "teamName": "外文系",
    "superTeamId": "10000",
    "createTime": "2017-06-25T06:07:45.000Z",
    "createUserId": null
  },
  {
    "teamId": "10005",
    "teamName": "化学系",
    "superTeamId": "10000",
    "createTime": "2017-06-25T06:07:45.000Z",
    "createUserId": null
  }
]

React code

 renderMenu(team){ //recursive rendering if(team.subcats && team.subcats.length){ return ( <SubMenu key={team.teamId} title = {team.teamName} > {team.subcats.map(this.renderMenu)} </SubMenu> ); }else{ return ( <Menu.Item key={team.teamId}> {team.teamName} </Menu.Item> ); } } render(){ let {teams} = this.props; teams.forEach(e => e.subcats=teams.filter(el=>el.superTeamId==e.teamId)); teams =teams.filter(e=>e.superTeamId==''); return( <Menu mode="inline" style={{ height: '100%' }} > {teams.map(this.renderMenu)} </Menu> ) } 

when the code run,it show an err:

Uncaught (in promise) TypeError: Cannot read property 'renderMenu' of undefined

Can any one help me ?

Answer 1

This line

{team.subcats.map(this.renderMenu)}

tries to access context in this, but your function is not binded to the "this" you want. Try changing the following function:

renderMenu(team){
      //recursive rendering
      if(team.subcats && team.subcats.length){
        return (
          <SubMenu key={team.teamId} title = {team.teamName} >
            {team.subcats.map(this.renderMenu)}
          </SubMenu>
        );
      }else{
        return (
          <Menu.Item key={team.teamId}>
            {team.teamName}
          </Menu.Item>
        );
      }

  }

to an arrow function :

renderMenu = (team) => {
      //recursive rendering
      if(team.subcats && team.subcats.length){
        return (
          <SubMenu key={team.teamId} title = {team.teamName} >
            {team.subcats.map(this.renderMenu)}
          </SubMenu>
        );
      }else{
        return (
          <Menu.Item key={team.teamId}>
            {team.teamName}
          </Menu.Item>
        );
      }

  }

Answer 2

For use this in renderMenu

constructor(){
    super();
    this.renderMenu = this.renderMenu.bind(this);
}

Or arrow function, like @user340764 said.

Answer 3

回调作为参数将错过此，您必须在使用它之前将其绑定

Answer 4

like@Andrew@user340764, bind renderMenu with this(context) before use it, or you can do like this

  render(){
    const that = this
    let  {teams} = this.props;
    teams.forEach(e => e.subcats=teams.filter(el=>el.superTeamId==e.teamId));
    teams =teams.filter(e=>e.superTeamId=='');
    return(
      <Menu mode="inline"    style={{ height: '100%' }}  >
      {teams.map(that.renderMenu)}
      </Menu>
    )
  }