Я пытался отладить надоедливую проблему уже слишком много часов. В настоящее время я использую компонент, называемый законным планировщиком. Планировщик принимает переменную с именем 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. Они генерируются монго, но я не думаю, что они вызывают проблему. Операционный список будет иметь тот же результат.
startDate
, который возвращается из базы данных. Я использую момент для анализа переданной даты, но это может вызвать сбой. Вы видите какие-то странные ошибки в консоли? - person dphaener   schedule 04.04.2016