I have failed to set a state in meteor react

Hello developers I unable to figure out how to set state in meteor react front data continuously arriving meteor subscriber
when i set state in Error occure “Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.”

here is my data snippiest which comes every milisecond

{millis: 91987, color: “b”, startclock: true}
{millis: 87847, color: “b”, startclock: false}
{millis: 89031, color: “w”, startclock: true}
{millis: 86906, color: “w”, startclock: false}
{millis: 87847, color: “b”, startclock: true}
{millis: 81237, color: “b”, startclock: false}
{millis: 86906, color: “w”, startclock: true}
{millis: 74281, color: “w”, startclock: false}
{millis: 81237, color: “b”, startclock: true}
{millis: 80174, color: “b”, startclock: false}
{millis: 74281, color: “w”, startclock: true}
{millis: 70250, color: “w”, startclock: false}
{millis: 80174, color: “b”, startclock: true}
{millis: 56784, color: “b”, startclock: false}
{millis: 70250, color: “w”, startclock: true}
{millis: 61985, color: “w”, startclock: false}
{millis: 56784, color: “b”, startclock: true}
{millis: 54862, color: “b”, startclock: false}
{millis: 61985, color: “w”, startclock: true}
{millis: 60470, color: “w”, startclock: false}
{millis: 54862, color: “b”, startclock: true}

import React, { Component } from "react";
import Game from "../pages/components/game";
import RealTime from "../../../lib/client/RealTime";
import TrackerReact from "meteor/ultimatejs:tracker-react";

export default class MainPage extends TrackerReact(React.Component) {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      visible: false,
      playerTime: "",
      subscription: {
        tasks: Meteor.subscribe("userData")
      }
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    this.setState({ visible: !this.state.visible });
  }


  getingData() {
    let gameinfo = [];
    let rm_index = 1;
    let records = RealTime.find(
      { nid: { $gt: rm_index } },
      { sort: { nid: 1 } }
    ).fetch();
    //  let records = RealTime.find().fetch();

    if (records.length) rm_index = [records.length - 1].nid;

    records.map(rec => {
      //      log.debug('realtime_record', rec);
      rm_index = rec.nid;
      switch (rec.type) {
        case "setup_logger":
          gameinfo = rec;
          break;

        case "game_start":
          gameinfo = rec;
          break;

        case "game_move":
          gameinfo = rec;
          break;

        case "update_game_clock":
          gameinfo = rec;
          this.setState({ playerTime: rec });
          break;
        default:

      }
    });

  }

  render() {
    let currentUser = this.props.currentUser;
    let userDataAvailable = currentUser !== undefined;
    let loggedIn = currentUser && userDataAvailable;
    let gamedata = this.getingData();
    //  const gameStart = this.gameStartData();
    console.log("Palyer Time", this.state.playerTime);
    return (
      <div className="main">
        
          <div className="col-sm-5 col-md-8 col-lg-5 board-section">
            <Game gameStart={gamedata} />
          </div>
	</div>	  
    );
  }
}

Research about Meteor withTracker

thank for your replay @rjdavid.can you provide a link?

I believe you should not have let gamedata = this.getingData() under render.
Your component re-renders every time a prop or a state is being updated so you would keep running that function and keep re-rendering the page.
I think the error is generated by this this.setState({ playerTime: rec }); however you should move that entire function out of render and do it in a React lifecycle method. For example, pull and evaluate your data in componentDidMount () { … } .
In general it would be best if you used a container for your component and manage all your data processing in the container and provide the results as props to your component.

1 Like

thanks for giving me right direction @ paulishca. I understand thak broke react life cycle.I am lake experience for meteor with Mongo DB as told me data manage with container what will i do and accomplish it? give me hint or any suggestion.

You might also want to consider debouncing your input with some rxjs observables to slow down the rate of change.