React MobXオブジェクト内の配列のキーを表示する方法

Question

私はreactとmobxを使って簡単なイベントアプリを作成しています。今度はjsonオブジェクトを持っています。オブジェクトには、それぞれ独自のキー（この場合はキーは月です）を持つ一連の配列が含まれています。何らかの理由でビューに表示できません。ここで

は私json -dataの例である： - ：

import { observable, action, async } from "mobx" 

export default class EventState { 
    @observable events= []; 

    constructor() { 
     this.getEvents() 
    } 

    @action async getEvents() { 

    await fetch('/api/events').then(response => { 
     if(response.ok){ 
      response.json().then(data => { 

       this.events.slice(0, this.events.length) 

        let actualEvents = {}; 
        let months = 'January February March April May June July August September October November December'.split(' '); 

        data.forEach(event => { 
        let date = new Date(event.release_date); 
        let month = date.getMonth(); 
        let monthName = months[month] 
        if (!(monthName in actualEvents)) { 
         actualEvents [monthName] = []; 
        } 

        actualEvents [monthName].push(event); 
        }); 


        this.events = actualEvents; 


       }); 
      } 
      else{ 
       // error 
      } 
     });  
    }  

} 

const eventState = new EventState(); 

{ 
    "events": { 
    "November": [{ 
      "event_name": "some-event", 
      "event_date": "2017-11-05" 
     }, 
     { 
      "event_name": "some-other-event", 
      "event_date": "2017-11-12" 
     } 
    ], 
    "December": [{ 
      "event_name": "some-event", 
      "event_date": "2017-12-05" 
     }, 
     { 
      "event_name": "some-other-event", 
      "event_date": "2017-12-12" 
     } 
    ] 
    } 
} 

私はmobxを使用していますので、私はビューと状態のファイルを分割し、ここで私の現在の状態ファイルです

次に、私のビューでイベントを表示しようとしましたが、今は何も表示されません。

import React from "react"; 
import { observer } from "mobx-react"; 
import moment from "moment"; 
import 'moment/locale/de'; 
import '../../css/main.scss'; 

import EventState from "./event-state"; 

@observer 
export default class Events extends React.Component { 
    constructor() { 
     super(); 

     this.state = new EventState(); 

    } 
    render() { 
     return (
     <div> 
      <Events state={this.state} events={this.state.events} /> 
     </div> 
    ) 
    } 
} 

const Events = observer(({ state, event, events }) => (
    <div className="wrapper"> 
     {state.events.map((event, i) => <Eventdetails state={state} event={event} key={i}/>)} 
    </div> 
)) 

const Eventdetails = observer(({ state, event }) => (
    <div> 
    // EVENT MONTH HERE? 
    <p>{event.name} {moment(event.event_date).format('LL')}</p> 
    </div> 
)) 

誰かが私がここで間違っていることを教えてもらえますか？

基本的に、私が達成したいことは、このような表示です：

November 
    - some event 5. November 
    - some other event 12. November 

December 
    - some event 5. December 
    - some other event 12. December 

任意のヘルプや提案は非常にあなたが使用できるオブジェクトからプロパティ名を取得するには

Answer 1

を高く評価しているがObject.keys(...)

Object.keys(this.events).forEach((key) => { 
    console.log(key); // November 
    this.events[key].forEach((event) => { 
    console.log(event.event_name, event.event_date); // some-event 2017-11-05 
    }); 
}) 

Answer 2

コードには複数の問題があります。非同期待望のGoogleをお願いします。あなたはそれを間違って使用しています。

await fetch('/api/events').then(response => {...}); 

非同期では、コールバックを追加する必要はありません。結果を変数に割り当てることができます。

const response = await fetch('/api/events'); 
if(response.ok){ ...} 

まず、非同期待機について確認し、約束してください。

セカンド

state.events.map(...); 

マップだけアレイ上で呼び出すことができるので、これは動作できません。しかし、ここではイベントが対象です。したがって、すべてのキーを配列として抽出し、それらをマップで反復処理する必要があります。 （それは@bennygenelがあなたに言うことです）;

Answer 3

観測可能なMobXアレイをgetEventsの通常のアレイリファレンスに置き換えます。どのようにこれをレンダリングするために

fetch('/api/events').then(response => { ... });