Карта не определена 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 не определено;не то, чтобы «map» не существовало в «todo.items» (технически верно, но не определяет проблему напрямую).