Question

我使用react和mobx创建了一个简单的事件应用。现在我得到了一个json - 对象，其中包含一堆数组，每个数组都有自己的密钥（在这种情况下，密钥是月份）。由于某些原因，我无法在我的视图中显示它们。

以下是我的json - 数据的示例：

{
  "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 { 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();

然后，在我的View fiel中，我尝试显示事件，但现在它确实没有显示任何内容：

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 for async等待。你错了。

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

使用异步等待您不需要添加随后的回调。您可以将结果分配给变量。

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

首先了解异步等待和承诺。

第二

state.events.map(...);

这不起作用，因为只能在数组上调用map。但事件是这里的一个对象。因此，您必须将所有键提取为数组，并使用map迭代它们。（那是@bennygenel告诉你的）;

Answer 3

您正在使用getEvents中的普通数组引用替换可观察的MobX数组。请尝试使用replace，这样就不会丢失参考：

this.events.replace(actualEvents);

如果您正在处理承诺，也不需要使用async/await：

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

React MobX如何在对象内显示数组的键

3 个答案: