未定义地图React JS

Question

我在映射组件状态时遇到问题。 我有这个出口：

export default[
  {
    'menu': 'Usuarios',
    'url' : '',
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      },
      {
        'title': 'Actualizar datos',
        'destino' : '/DashBoard'
      }
    ]

  },
  {
    'menu': 'Socios',
    'url' : '',
    'items':[
      {
        'title': 'Membrecias',
        'destino' : '/DashBoard'
      }
    ]

  },
  {
    'menu': 'Clases',
    'url' : '',
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      }
    ]

  },
  {
    'menu': 'Productos',
    'url' : '',
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      }
    ]

  },
  {
    'menu': 'Compras',
    'url' : '',
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      }
    ]

  },
  {
    'menu': 'Ventas',
    'url' : '',
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      }
    ]

  },
  {
    'menu': 'Estadisticas',
    'url':'/Dashboard'
  },
  {
    'menu': 'Reportes',
    'url': '/DashBoard'
  }
]

菜单路由未定义，因此将“ / DashBoard”分配给所有菜单路由，但这不是问题。

我尝试通过以下方式映射组件的状态时遇到问题：

// Dependencies
import React, {Component} from 'react';
//Data
import mdata from '../../Data/Settings/MenuDash';

class DropTownMenu extends Component{
  constructor(){
    super();
    this.state={
      data: mdata,
    }
  }
  render(){

    return(
      <div className='DropTownMenu'>
        {this.state.data.map((todo,i) =>
          <div key={i}>
          <span>{todo.menu}</span>
          <span>{todo.url}</span>
          <span>{todo.items.map((todo, i)=><span key={i}>{todo.title}</span>)}</span>
      </div>

      )}

      </div>
    );
  }
}
export default DropTownMenu;

使用'span'标记只是为了测试它，我必须将其实现为列表，但我会解决这个问题。 问题是，这不会给我控制台错误，但是如果在浏览器中，这些错误如下：

Answer 1

在您的数据数组中，某些对象没有'items'数组属性（最后2个）。

  {
    'menu': 'Ventas',
    'url' : '',
    //has items
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      }
    ]

  },
  // no items
  {
    'menu': 'Estadisticas',
    'url':'/Dashboard'
  },
  {
    'menu': 'Reportes',
    'url': '/DashBoard'
  }

您可以进行未定义的检查，也可以修改原始数据，以便数组中的所有对象都具有“ items”属性。

<span>{Array.isArray(todo.items) && todo.items.map(item => ...)}</span>

请注意，该错误表明它无法“读取未定义的属性映射”，并且指向“ todo.items.map”。 这意味着“ todo.items”是未定义的； 不是“ todo.items”上不存在“地图”（技术上是正确的，但不能直接查明问题所在）。