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

Question

我已经尝试调试一个烦人的问题好几个小时了。我目前正在使用一个名为 legit scheduler 的组件。调度程序接受一个名为 event 的变量，我可以在本地的 Flux 存储中定义它并显示得很好。但是当在 Mongo 数据库中定义完全相同的数据并将其连接到同一存储时，调度程序将停止显示事件。

我正在使用 React-Render，可能是我使用它的方式导致了问题。或者来自 MonogDB 的数据可能有问题。或者故障可能出在调度程序中，因为它还很年轻。

呈现此数据的文件实际上有两个正在使用数据的组件。其中之一（OperationList）可以很好地呈现来自数据库的信息，但调度程序不会。这是我注释掉从数据库

获取的代码时看到的内容

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

Events coming from Store

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

Events coming from Database

当 onChange 函数触发时，我收到以下警告

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

为什么调度程序在处理数据库内容时出现问题，而我的 OperationList 工作正常？

这是感兴趣的文件。

components/Scheduler.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();

server/database.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 文件夹解决了这个问题。我知道这两个版本之间没有根本区别，所以我现在不知道问题出在哪里。我不知道这个问题对社区是否有任何价值，但我将其张贴在这里以结束

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

React component renders data from Flux store but not when fetched from Mongo database

javascript

mongodb

reactjs-flux

react-router