javascript - map 未定义 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”上不存在“map”(技术上正确，但没有直接指出问题)。