未定義地圖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”上不存在“地圖”（技術上是正確的，但不能直接查明問題所在）。