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>
);
}
}