One insert to db, but withTracker runned bad way

1

Hi All, I have question.
For his coverage, I publish parts of the source code, and included the question in the body
export default withTracker(() => { … }

-----… \sheduler\imports\ui\OrdersContainer.js-----
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import { Orders } from ‘…/api/Orders.js’;
import Order from ‘./Order.js’;
export default class OrdersContainer extends Component {

handleSubmit(event) {
// !!! CASE 1
//event.preventDefault();
// Find the text field via the React ref
const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Orders.insert({ title:text, createdAt: new Date(), });
// Clear form
ReactDOM.findDOMNode(this.refs.textInput).value = ‘’;
}

renderOrders() {
…

----… \sheduler\imports\ui\Order.js----------
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import { Orders } from ‘…/api/Orders.js’;

// Task component - represents a single todo item
export default class Order extends Component {

deleteThisOrder() {
// !!! CASE 2
Orders.remove(this.props.order._id);
}
…

------ … \sheduler\imports\ui\App.js --------------

import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import { Orders} from ‘…/api/Orders.js’;
import { Tasks } from ‘…/api/Tasks.js’;
import { Staff } from ‘…/api/Staff.js’;
import OrdersContainer from ‘./OrdersContainer.js’;
import TaskContainer from ‘./TaskContainer.js’;
import StaffCollection from ‘./StaffCollection.js’;
import { withTracker } from ‘meteor/react-meteor-data’;

// App component - represents the whole app
class App extends Component {

constructor(props) {
super(props);
this.state = {selected_order: null};
}

render() {
…
}
}
export default withTracker(() => {
return {
orders: Orders.find({}, { sort: { createdAt: -1 }}).fetch(), staff: Staff.find().fetch(),
};
!!! Case 1.
First comes { orders:Array[0] , staff:Array[0] };
Then comes { orders: Array with new item , staff:Array unchanged as expected };
WHY come the zeroed collection?
!!! Case 2.
Comes unchanged as expected { orders: Array without remote value , staff:Array unchanged as expected };
})(App);

2

You are trying to work with database from client side. It only works with insecure package. You should use method.

3

Yep, I know, I working in insecure mode.

4

I have done $ meteor remove insecure, and change source, the effect is some.

5

export default withTracker(() => { … }

-----… \sheduler\imports\ui\OrdersContainer.js-----
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import { Orders } from ‘…/api/Orders.js’;
import Order from ‘./Order.js’;
export default class OrdersContainer extends Component {

handleSubmit(event) {
// !!! CASE 1
//event.preventDefault();
// Find the text field via the React ref
const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Meteor.call(‘orders.insert’, text);
// Clear form
ReactDOM.findDOMNode(this.refs.textInput).value = ‘’;
}

renderOrders() {
…

----… \sheduler\imports\ui\Order.js----------
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import { Orders } from ‘…/api/Orders.js’;

// Task component - represents a single todo item
export default class Order extends Component {

deleteThisOrder() {
// !!! CASE 2
Meteor.call(‘orders.remove’, this.props.order._id);
}
…

------ … \sheduler\imports\ui\App.js --------------

import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import { Orders} from ‘…/api/Orders.js’;
import { Tasks } from ‘…/api/Tasks.js’;
import { Staff } from ‘…/api/Staff.js’;
import OrdersContainer from ‘./OrdersContainer.js’;
import TaskContainer from ‘./TaskContainer.js’;
import StaffCollection from ‘./StaffCollection.js’;
import { withTracker } from ‘meteor/react-meteor-data’;

// App component - represents the whole app
class App extends Component {

constructor(props) {
super(props);
this.state = {selected_order: null};
}

render() {
…
}
}
export default withTracker(() => {
return {
orders: Orders.find({}, { sort: { createdAt: -1 }}).fetch(), staff: Staff.find().fetch(),
};
!!! Case 1.
First comes { orders:Array[0] , staff:Array[0] };
Then comes { orders: Array with new item , staff:Array unchanged as expected };
WHY come the zeroed collection?
!!! Case 2.
Comes unchanged as expected { orders: Array without remote value , staff:Array unchanged as expected };
})(App);

6

You have to subscribe before doing anything with the data.

7

I think you need an answer to “how does pub/sub work in Meteor?”. You should read this, as it explains the concepts well:

If I may also add some advice on asking for help: please make your code easier to read by wrapping it between lines with triple-backticks, like this:

```
your
code
here
```
1 Like