未定义地图React JS

时间:2019-01-31 01:48:48

标签: javascript reactjs frontend

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

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'标签只是为了测试它,我必须将它实现为列表,但是我会解决的。问题是,这不会给我控制台错误,但是如果在浏览器中,这些错误如下: Error Codes - map is not defined -

1 个答案:

答案 0 :(得分:3)

在您的数据数组中,某些对象没有'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”上不存在“地图”(技术上是正确的,但不能直接查明问题所在)。