Значения JSON, которые нужно получить с помощью .map, в React.Js

Question

Я получаю этот JSON из бэкэнда с Loopback / Node.Js

[
  {
    "label": "Pub Radio",
    "icone": "",
    "Mp3": {
      "33278": {
        "id": 33278,
        "titre": "Ricardo Villalobos - Caminando",
        "intention1": "Doux",
        "intention2": "Doux",
        "intention3": "Doux",
        "langue": "Allemand",
        "visibilite": 1
      }
    }
  },
  {
    "label": "Pub Cd/Dvd",
    "icone": "",
    "Mp3": {
      "33277": {
        "id": 33277,
        "titre": "Mano lo taugh - Primative People",
        "intention1": "Chaleureux, rassurant",
        "intention2": "Joyeux",
        "intention3": "Souriant",
        "langue": "Allemand",
        "visibilite": 1
      },
      "33279": {
        "id": 33279,
        "titre": "Foals - Late Night (Solomun Remix).mp3",
        "intention1": "Amical, complice",
        "intention2": "Amical, complice",
        "intention3": "Amical, complice",
        "langue": "Allemand",
        "visibilite": 1
      }
    }
  },
  {
    "label": "Billboard",
    "icone": "",
    "Mp3": {
      "33280": {
        "id": 33280,
        "titre": "Techno",
        "intention1": "Posé, calme",
        "intention2": "Amical, complice",
        "intention3": "Souriant",
        "langue": "Americain",
        "visibilite": 1
      }
    }
  }
]

Это результат после выполнения console.log в представлении, где я хочу отобразить результаты: то же самое, что иbackend массив объектов, и в этих объектах вы также можете найти несколько объектов.

JSON3:

То, что я хотел сделать, это отобразить и отобразить метки и все атрибуты внутри MP3, и все, что я получаю, это extraitMP3.map не является функцией.Я думаю, что проблема в том, что .map можно использовать только с массивами, но я не знаю, как с этим справиться.Буду признателен за любую помощь

Это код, который я построил до сих пор:

import React, {Component} from "react";
import {Col, Row,Card,Button} from "antd";
import Emoji from 'a11y-react-emoji';

import ExtraitsCell from "./ExtraitsCell/index";
import extraitMP3 from "./data";
import {arrayMove, SortableContainer} from "react-sortable-hoc";

import ContainerHeader from "components/ContainerHeader/index";
import IntlMessages from "util/IntlMessages";
import {getExtraitMp3} from "appRedux/actions/Comedien";
import { connect } from "react-redux";
import {userSignOut} from "appRedux/actions/Auth";
//import axios from "axios";

var moment = require('moment');
 const ExtraitsMp3 = SortableContainer(({extraitMP3}) => {
  return ( 
    <Row>   
      <Col span={24}>
        {extraitMP3.map((extraitMP32, index) => (
          <ExtraitsCell key={index} index={index} extraitMP32={extraitMP32}/>
        ))}
      </Col>
    </Row>
  );
}); 

class ListExtrait extends Component {
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      extraitMP3: arrayMove(this.state.extraitMP3, oldIndex, newIndex),
    });
  };

  constructor() {
    super();
    this.state = {
      extraitMP3:extraitMP3, 
     }
  }

  componentDidMount() {
    const user = localStorage.user;
    var DateActuelle = new Date().toISOString(); // get current date
    const TokenDateCreation = user ? JSON.parse(user).created : '';
    const TokenExpirationSeconds = user ? JSON.parse(user).ttl : '';
    var dateFormat = 'YYYY-MM-DD HH:mm:ss';
    var TokenExpirationDate = moment(TokenDateCreation).add('seconds', TokenExpirationSeconds).format(dateFormat);
    var ActualDate = moment(DateActuelle).format(dateFormat);
    //console.log('localStorage :',localStorage.user)
    if (ActualDate < TokenExpirationDate)
      setTimeout(() => {
        this.props.userSignOut(); //passing the user id
      }, 86300000)
      this.props.getExtraitMp3();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
     //console.log('nextProps : ', nextProps)
     if (nextProps.extraitMP3 !== prevState.extraitMP3 && nextProps.extraitMP3) {
       return { extraitMP3: nextProps.extraitMP3 };   
     }
     else return null;
   }


  render() {
    const {extraitMP3/*,label */} = this.state;
    console.log('Extrait MP3 ',extraitMP3) 
    console.log('******************');

    return (
    <Card>   
      <Card styleName="gx-card-list icon icon-data-display gx-mr-2 gx-text-blue gx-fs-xl"> 
        <div className="gx-media-body">
        <IntlMessages id="menu.MesExtraisMP3.PubTV"/> &nbsp; <i className={`icon icon-data-display gx-mr-2 gx-text-blue`}/>
        </div>
        <div className="gx-main-content gx-mb-4">
          <ContainerHeader  match={this.props.match}/>
           <ExtraitsMp3 extraitMP3={extraitMP3} onSortEnd={this.onSortEnd} useDragHandle={true} /> 
        </div>
        <Button type="primary" htmlType="submit" labelCol={{xs: 24, sm: 5}} wrapperCol={{xs: 24, sm: 12}}>
              Enregistrer
        </Button>
      </Card>  

      <Card styleName="gx-card-list icon icon-data-display gx-mr-2 gx-text-blue"> 
        <div className="gx-media-body">
        <IntlMessages id="menu.MesExtraisMP3.JeuVideo"/> &nbsp; 
        <Emoji symbol="🎮" label="jeu" className={`gx-fs-xl`}/>&nbsp;&nbsp;
        </div>
        <div className="gx-main-content gx-mb-4">
          <ContainerHeader  match={this.props.match}/>
          <ExtraitsMp3 extraitMP3={extraitMP3} onSortEnd={this.onSortEnd} useDragHandle={true}/>
        </div>
        <Button type="primary" htmlType="submit" labelCol={{xs: 24, sm: 5}} wrapperCol={{xs: 24, sm: 12}}>
              Enregistrer
        </Button>
      </Card>  
    </Card> 

    )
  }
}

const mapStateToProps = ({ comedien }) => {
  const { extraitMP3} = comedien;
  return { extraitMP3}
};

export default connect(mapStateToProps, { userSignOut ,
  getExtraitMp3
})(ListExtrait);

./data содержит это:

export default [{
  'label':'',
  'icone':'',
  'Mp3':{
  'idSon':{
  'titre': '',
  'visibilite': '',
  'langage': '',
  'intention1': '',
  'intention2': '',
  'intention3': '',
   } },}]