关于javascript:未捕获(Promise)TypeError:无法读取未定义的属性” renderMenu”

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

我想根据json创建一个动态菜单,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
[
  {
   "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
  }
]

反应码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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)TypeError:无法读取未定义的属性" renderMenu"

任何人都可以帮助我吗?


此行

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

尝试访问此内容,但是您的函数未绑定到所需的"此"。尝试更改以下功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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>
        );
      }

  }

到箭头功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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>
        );
      }

  }

用于renderMenu

中的this

1
2
3
4
constructor(){
    super();
    this.renderMenu = this.renderMenu.bind(this);
}

或箭头功能,如@ user340764所说。


like @ Andrew @ user340764,将renderMenu与此(上下文)绑定,然后再使用它,或者您
可以这样

1
2
3
4
5
6
7
8
9
10
11
  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>
    )
  }

作为参数的回调将丢失此消息,使用它之前必须将其绑定