React组件从Flux存储中呈现数据，但从Mongo数据库中提取数据时不呈现

Question

我已经试着调试一个烦人的问题好几个小时了。我目前正在使用一个名为"合法调度器"的组件。调度器接收一个名为event的变量，我可以在Flux存储中本地定义它，并显示得很好。但是，当在Mongo数据库中定义相同的确切数据并将其连接到同一存储区时，调度器将停止显示事件。

我使用的是React Render，可能是我使用的方式造成了问题。或者来自MonogDB的数据可能有问题。或者故障可能发生在调度器中，因为它还很年轻。

呈现此数据的文件实际上有两个组件在使用数据。其中一个（OperationList）可以很好地呈现数据库中的信息，但调度程序不会。以下是当我注释掉从数据库中获取的代码时所看到的内容

operationStore.onChange(function(items){
   // events = items;
})

来自Store 的事件

然后，当我取消对onChange中的代码的注释时，存储数据将按预期被database.js中的内容替换。但这就是当这种情况发生时所看到的。

来自数据库的事件

当onChange功能触发时，我会收到以下警告

app.js:52469 Warning: [react-router] You cannot change <Router routes>; it will be ignored

为什么调度程序对数据库中的内容有问题，而我的OperationList工作得很好？

这是感兴趣的文件。

组件/时间表.jsx

var React = require('react');
var Scheduler = require('legit-scheduler/lib/scheduler');
var RangeDate = require('legit-scheduler/lib/range_date');
var Grid = require('react-bootstrap/lib/Grid')
var Row = require('react-bootstrap/lib/Row')
var Col = require('react-bootstrap/lib/Col')
var operationStore = require('./../stores/OperationStore.jsx');
var OperationList = require('./OperationList.jsx');
var resources = ['one', 'two', 'three', 'four', 'five'],
    day = new Date(),
    today = new RangeDate(day.setHours(8)),
    events =  operationStore.getItems();
module.exports = React.createClass({
    render() {
        return (
        <Grid>
            <Row className="show-grid">
                <Col xs={10} md={10}>
                    <Col xs={2} md={2}><OperationList items={events}/></Col>
                    <Scheduler
                        from={today}
                        rowHeight={50}
                        to={today.advance('hours',10)}
                        resources={resources}
                        events={events}
                        width={1000}
                    />
                </Col>
            </Row>
        </Grid>
        )
    }
})
operationStore.onChange(function(items){
   // events = items;
})

stores/OperationStore.jsx

var RangeDate = require('legit-scheduler/lib/range_date');
function operationStore(){
    var day = new Date()
    var today = new RangeDate(day.setHours(8))
    var operations =  [{
        operationName: "Store",
        patientName: "Adrian Garcia",
        typeOfSurgery: "Open Heart",
        id: 'foobar22',
        title: 'From the Store',
        startDate: today.advance('hours', 1).toRef(),
        duration: 5,
        resource: 'two'
    },{
        _v:0,
        _id:"sdfsdffsdf",
        operationName: "Stores",
        patientName: "Adrian Garcia",
        typeOfSurgery: "Open Heart",
        id: 'foobar22',
        title: 'From the 2Store',
        startDate: today.advance('hours', 1).toRef(),
        duration: 5,
        resource: 'three'
    }];
    var listeners = [];
    var updateOperations = function(helper){
        helper.get("api/operations")
            .then(function(data){
                operations = data;
                triggerListeners(listeners);
            });
    }
    updateOperations(helper);
    function getItems(){
        return operations;
    };
    var onChange = function(listener){
        listeners.push(listener);
        return listeners;
    }
    ...
    var triggerListeners = function(listeners) {
        listeners.forEach(function(listener) {
            listener(operations);
        })
    }

    return {
        getItems: getItems,
        onChange: onChange,
        addOperationItem: addOperationItem,
        deleteOperationItem: deleteOperationItem,
        triggerListeners: triggerListeners,
        dispatchRegister: dispatchRegister,
        registerEvent: registerEvent,
        updateOperations: updateOperations
    }
}
module .exports = new operationStore();

服务器/数据库.js

var mongoose = require('mongoose');
var Operation = require('./models/Operation.js');
var RangeDate = require('legit-scheduler/lib/range_date');
mongoose.connect('mongodb:connection', function(){
    mongoose.connection.db.dropDatabase();
    var day = new Date()
    var today = new RangeDate(day.setHours(8))
    var operations = [{
        operationName: "From the Database",
        patientName: "Adrian Garcia",
        typeOfSurgery: "Open Heart",
        id: 'foobar',
        title: 'From the Database',
        startDate: today.advance('hours', 1).toRef(),
        duration: 5,
        resource: 'one'
    }];

    operations.forEach(function(operation){
        new Operation(operation).save();
    })
  })

更新

operationStore.onChange(function(items){
    console.log(events)
    events = items;
    console.log(events)
})

第一个日志。。。

Array[2]
0
:
Object
duration
:
5
id
:
"bar"
operationName
:
"Store"
patientName
:
"Adrian Garcia"
resource
:
"two"
startDate
:
"April 4, 2016, 09:20:30"
title
:
"From the Store"
typeOfSurgery
:
"Open Heart"
__proto__
:
Object
1
:
Object
duration
:
5
id
:
"foo"
operationName
:
"Store"
patientName
:
"Adrian Garcia"
resource
:
"three"
startDate
:
"April 4, 2016, 09:20:30"
title
:
"Also from Store"
typeOfSurgery
:
"Open Heart"
__proto__
:
Object

第二个日志。。。

Array[1]
0
:
Object
__v
:
0
_id
:
"5702b065f23b1dbc15d0280c"
duration
:
5
id
:
"foobar"
operationName
:
"From the Database"
patientName
:
"Adrian Garcia"
resource
:
"one"
startDate
:
"April 4, 2016, 09:20:21"
title
:
"From the Database"
typeOfSurgery
:
"Open Heart"

第二个日志附带了两个额外的变量__v和_id。这些是由mongo生成的，但我不认为是它们造成了问题。操作列表也会有同样的结果。

Answer 1

因此切换到最新的src文件夹解决了问题。据我所知，这两个版本之间没有根本的区别，所以我现在不知道问题出在哪里了。我不知道这个问题是否对社区有任何价值，但我在这里发布这个问题是为了关闭