ReactiveVar and createContainer

help
1

Hello, I’m having troubles to work with ReactiveVar and createContainer, it is always overwriting the value for some reason and I cannot find out why.

Within the componen there’s a button to load more records from the DB, but whenever I push it and log the result it’s always writing 2, for some reason reactive var value gets reseted every time I push the button.

I’ve also tested with a normal variable to check whether the value was reseted but it worked just as expected, and each button press added 1 to that given variable.

PreAnalisisContainer.jsx

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { ReactiveVar } from 'meteor/reactive-var';

import PreAnalisis from '../components/PreAnalisis.jsx'

export default createContainer( ({ params }) => {
	let cuadreHandle = null;
	let loading = false;
	let ficheros = [];
	let formatoFicheros = [];
	let ficherosExist = false;
	const REGISTROS_POR_PAGINA = 3;
	const paginaNumero = new ReactiveVar(1);

	const cargarMas = () =>{
		paginaNumero.set(paginaNumero.get() + 1);
		console.log('ReactiveVar vale: ' + paginaNumero.get());
	}

	cuadreHandle = Meteor.subscribe('cuadre.ficherosSubidos', REGISTROS_POR_PAGINA * paginaNumero.get());
	loading = !cuadreHandle.ready();
	ficheros = Cuadre.find().fetch();
	ficherosExist = !loading && ( ficheros.length > 0 );
	return {
		loading,
		ficheros,
		formatoFicheros,
		cuadreHandle,
		ficherosExist,
		cargarMas,
	}

}, PreAnalisis);

(component) PreAnalisis.jsx

export default class PreAnalisis extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
         <ul className="list-group">
            {this._datosPorSociedad("0049")}
         </ul>
         <button className="btn btn-primary" onClick={this.props.cargarMas}>Cargar mas...</button>
      </div>
    );
  }
2

Did you figure out the problem?

I think you need to declare the ReactiveVar outside of the container. See this example.

3

Hi @stubborncoder,

Yes @rdagger is correct. When a ReactiveVar change is detected createContainer’s callback method will be re-executed. Hence, the ReactiveVar will be re-initialized again. See the meteor-react-guide for this especially this paragraph:

The container component created by createContainer() will reactively rerender the wrapped component in response to any changes to reactive data sources accessed from inside the function provided to it.

So now to solve this you should put the ReactiveVar outside the createContainer’s callback method to avoid re-initialization like:

// Outside createContainer's callback method
const paginaNumero = new ReactiveVar(1);

export default createContainer( ({ params }) => {

        // more codes here ...

	const cargarMas = () =>{
		paginaNumero.set(paginaNumero.get() + 1);
		console.log('ReactiveVar vale: ' + paginaNumero.get());
	}

	cuadreHandle = Meteor.subscribe('cuadre.ficherosSubidos', REGISTROS_POR_PAGINA * paginaNumero.get());

        // more codes here ...

	return {
                // more codes here...
		cargarMas,
	}

}, PreAnalisis);
1 Like
4

Thanks both for your kind advice!.