Компонент React отображает данные из хранилища Flux, но не при извлечении из базы данных Mongo.

Я пытался отладить надоедливую проблему уже слишком много часов. В настоящее время я использую компонент, называемый законным планировщиком. Планировщик принимает переменную с именем event, которую я могу определить локально в хранилище Flux, и отображает ее нормально. Но когда вы определяете одни и те же точные данные в базе данных Mongo и подключаете их к тому же хранилищу, планировщик перестает отображать события.

Я использую React-Render, и может быть то, как я его использую, вызывает проблему. Или может быть что-то не так с данными, поступающими из MonogDB. Или проблема может быть в планировщике, так как он еще очень молод.

Файл, отображающий эти данные, на самом деле состоит из двух компонентов, потребляющих данные. Один из них (OperationList) прекрасно отображает информацию из базы данных, а планировщик — нет. Вот что я вижу, когда я комментирую фрагмент кода, который извлекается из базы данных

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

События, поступающие из Магазина

И затем, когда я раскомментирую этот код внутри onChange, данные хранилища заменяются тем, что находится внутри database.js, как и ожидалось. Но это то, что видно, когда это происходит.

События, поступающие из базы данных

и я получаю следующее предупреждение, когда срабатывает функция onChange

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

Почему у планировщика возникают проблемы с данными из базы данных, а мой OperationList работает нормально?

Вот интересующие файлы.

компоненты/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;
})

магазины/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. Они генерируются монго, но я не думаю, что они вызывают проблему. Операционный список будет иметь тот же результат.


person Adrian Garcia    schedule 04.04.2016    source источник
comment
Я бы начал с проверки startDate, который возвращается из базы данных. Я использую момент для анализа переданной даты, но это может вызвать сбой. Вы видите какие-то странные ошибки в консоли?   -  person dphaener    schedule 04.04.2016
comment
В консоли ничего. Я проверил строку, которая возвращается как из хранилища, так и из базы данных, и они точно такие же. Я могу опубликовать то, что регистрирует консоль при печати событий до и после onChange, когда у меня будет такая возможность.   -  person Adrian Garcia    schedule 04.04.2016
comment
Я добавил журналы до и после функции onChange   -  person Adrian Garcia    schedule 04.04.2016
comment
Адриан, ты используешь модифицированную версию? Мне будет сложно отлаживать, не зная, как выглядит измененный код. Я использую этот компонент вместе с Relay, и он отлично работает с обновлениями из базы данных и т. д.   -  person dphaener    schedule 05.04.2016
comment
Да его модифицировали. Команда находится в процессе использования немодифицированного источника и посмотрим, получим ли мы тот же результат.   -  person Adrian Garcia    schedule 05.04.2016
comment
скоро обновлю :)   -  person Adrian Garcia    schedule 05.04.2016


Ответы (1)


Таким образом, переход на самую последнюю папку src решил проблему. Насколько мне известно, между двумя версиями не было принципиальной разницы, поэтому я не знаю, в чем была проблема. И я не знаю, имеет ли этот вопрос какую-либо ценность для сообщества, но я публикую это здесь для закрытия.

person Adrian Garcia    schedule 08.04.2016
comment
На самом деле, я считаю, что проблема была с минутами и секундами. Когда информация была извлечена из mongodb, у нее была отметка времени. Но когда он прибыл на сторону клиента, его сравнили с другой меткой времени, которая имела десятисекундную задержку. Поскольку две метки времени не совпадают, событие не отображается. - person Adrian Garcia; 09.04.2016