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> ); } } |
用于
中的
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> ) } |
作为参数的回调将丢失此消息,使用它之前必须将其绑定