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

反应代码

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

代码运行时，显示错误：

Uncaught（in promise）TypeError：无法读取未定义的属性'renderMenu'

任何人都可以帮助我吗？

Answer 1

这一行

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

尝试访问此中的上下文，但您的功能未绑定到＆＃34;此＆＃34;你要。尝试更改以下功能：

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

  }

Answer 2

在this

中使用renderMenu

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

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

Answer 3

回调参数将错过这个，你必须在使用之前绑定它

Answer 4

与@ Andrew @ user340764一样，在使用它之前将renderMenu与此（上下文）绑定，或者你可以这样做

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

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

4 个答案: