Question

因此，我尝试显示所获取的json数据，并成功显示了“ MenuRole”中的数据，但“ cmsmenuschild”数组对象中的数据除外。它始终保持错误状态，有人知道这是怎么回事或以其他方式在我的json数据中的“ cmsmenuschild”中显示数据吗？任何帮助将不胜感激。

json数据

  "MenuRole": [
            {
                "id": 1,
                "name": "Manage User",
                "icon": "ion-person",
                "path_fe": "dashboard/user",
                "cmsmenuschild": [
                    {
                        "name": "Create User",
                        "cmsprivilegesroles": {
                            "is_allowed": 1
                        }
                    },
                    {
                        "name": "Update User",
                        "cmsprivilegesroles": {
                            "is_allowed": 1
                        }
                    },
                ],
            },
         ]

Sidebar.js

class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      MenuRole: [],
    };
  }

getMenus = () => {
  return this.state.MenuRole.map((role, index) =>
    (<Menu.Item key={role.name}>
        <Link to={
        {
          pathname: `/${role.path_fe}`,
        }}
        >
          <i className={role.icon} />
          <span className="nav-text">
            <span>{role.name}</span>
            <span>{role.cmsmenuschild.name}</span>
            <span>{role.cmsmenuschild[0].cmsprivilegesroles.is_allowed}</span>
            <span>{role.cmsmenuschild[1].cmsprivilegesroles.is_allowed}</span>
          </span>
        </Link>
     </Menu.Item>));
}


render() {
  return(
    <div>
        {this.getMenus()}
    </div>
  );
}

}

Answer 1

以下行{role.cmsmenuschild.name}是不正确的，因为csmenuschild是一个数组，我们不知道从哪个孩子那里获得名字。你可以这样得到 {role.cmsmenuschild[0].name}或{role.cmsmenuschild[1].name}。

但是，这不是一个好方法。您正在静态访问csmenuschild数组。此数组中可以有两个以上的子级。因此，应该像在MenuRoles上进行映射一样在其上进行映射

Answer 2

我认为有必要重写getMenus函数。因为我们要从中渲染元素数组。我们应该使用数组并将元素推入其中。

getMenus = () => {

      var elements = [];
      this.state.MenuRole.map((role, index) =>{

    elements.push(<Menu.Item key={role.name}>
        <Link to={
    {
      pathname: `/${role.path_fe}`,
    }}
    >
      <i className={role.icon} />
      <span className="nav-text">
        <span>{role.name}</span>
        <span>{role.cmsmenuschild.name}</span>
        <span>{role.cmsmenuschild[0].cmsprivilegesroles.is_allowed}</span>
        <span>{role.cmsmenuschild[1].cmsprivilegesroles.is_allowed}</span>
      </span>
    </Link>


  </Menu.Item>))
   }
return elements;
 }

reactjs错误：如果要渲染子级集合，请使用数组代替

2 个答案: