javascript - 未捕获( promise )TypeError : Cannot read property 'renderMenu' of undefined

Question

我想根据这样的json创建一个动态菜单:

[
  {
    "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 代码

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>
    )
  }

  

当代码运行时，它显示错误:

未捕获( promise 中)类型错误:无法读取未定义的属性“renderMenu”

谁能帮帮我吗？

Answer 1

这一行

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

尝试访问 this 中的上下文，但您的函数未绑定(bind)到您想要的“this”。尝试更改以下函数:

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>
        );
      }

  }

发送至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>
        );
      }

  }