Cannot update during an existing state transition

Question

My meteor project keeps crashing my browser when I load it up. I can only avoid browser crash if I comment out this.setState({input_36:currentApp.input_36}); in the App.jsx file. Can someone tell me how to fix my code so that the project can load without crashing and if you click on any hyper links in the <ul>, it will re-render the form? And make sure the links are WCAG compliant and search engine optimized by ensuring the href= attribute is there?

Here's my project...in terminal command line I do

meteor create crudapp
cd crudapp
rm crudapp.js
meteor remove autopublish
meteor add react
meteor add iron:router

Then I have the following files in my project

crudapp.html

<head>
  <title>Application Form</title>
</head>
<body>
  <div id="render-target"></div>
</body>

crudapp.jsx

Applications = new Mongo.Collection("applications");
if(Meteor.isServer)
{
    Meteor.publish("applications", function(){
      return Applications.find();
    });
}
var configAppRoute = {waitOn:function(){return [Meteor.subscribe('applications')]},action:applicationController};
Router.route('/application',configAppRoute);
Router.route('/application/:appid',configAppRoute);

function applicationController()
{
  var router = this;

  Meteor.startup(function () {
  ReactDOM.render(<App router={router} />, document.getElementById("render-target"));
  });
}

Meteor.methods({
  saveApplication(formVals) {
    formVals['createdAt'] = new Date();
    Applications.insert(formVals);
}
});

App.jsx

App = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    return {
      applications: Applications.find({}, {sort: {createdAt: -1}}).fetch(),
    }
  },
  getInitialState: function() {
    return this.loadForm(this.props.router.params.appid);
  },
  loadForm(appId) {
    var currentApp = Applications.findOne({_id:appId});
    if(!currentApp) currentApp = {};
    return currentApp;
  },
  clickLoadForm(appId)
  {
    var currentApp = this.loadForm(appId);
    //this.setState({input_36:currentApp.input_36});
  },
  renderListApplications() {
    var _this = this;
    return this.data.applications.map(function(applicationform,i) {
      return <li key={"li"+i}><a onClick={_this.clickLoadForm(applicationform._id)} href={Meteor.absoluteUrl()+'application/' +applicationform._id} key={"a"+i}>Version {applicationform._id}</a></li>;
    });
  },

  handleSubmit(event) {
    event.preventDefault();
    var refs = this.refs;
    var formVals = new Object();
    Object.keys(refs).map(function(prop, index){
      if(refs[prop].nodeName.match(/(INPUT|SELECT|TEXTAREA)/).length > 0)
        formVals[prop] = refs[prop].value;
    });

    Meteor.call("saveApplication", formVals);

  },
  handleChange: function(e) {
      this.setState({ input_36: e.target.value });
        },
  render() {
    return (
      <div className="container">
          <ul>
            {this.renderListApplications()}
          </ul>
          <div>{JSON.stringify(this.data.currentApplication)}</div>
          <form className="new-task" onSubmit={this.handleSubmit} >
            <input ref="input_36" type="text" tabIndex="1" value={this.state.input_36} onChange={this.handleChange} />
            <button type="submit">Submit</button>
          </form>
      </div>
    );
  }
});

Then I go to command line and type meteor to start up the project. Then I go to my web browser. A text field appears so you can type something and press enter a few times, and a list to each form you created will automatically appear.

Next I modify App.jsx by uncommenting the bold line. The project will recompile. Then I go to my web browser and it freezes because of the infinite loop with the error message

Cannot update during an existing state transition (such as within "render"). Render methods should be a pure function of props and state.

How do I fix this situation so that it will load up the project and click on links will re-render the form?

oobgam oobgam · Accepted Answer · 2015-12-25T17:00:04

John says: Change onClick={_this.clickLoadForm(applicationform._id)} to onClick={_this.clickLoadForm.bind(_this,applicationform._id)}

If that doesn't work, then maybe some variation of the below

Try changing _this.clickLoadForm(_this.props.router.params.appid) to _this.clickLoadForm

<a  onClick={_this.clickLoadForm}
    data-value={_this.props.router.params.appid}
    href={Meteor.absoluteUrl()+'application/' +applicationform._id}
    key={"a"+i}>
    Version {applicationform._id}
</a>


clickLoadForm(e) {
    var appId = e.target.dataset.value;
    var currentApp = this.loadForm(appId);
    this.setState({input_36:currentApp.input_36});
}

It seems like you're already executing the clickLoadForm function thus triggering this.setState

Cannot update during an existing state transition

2 Answers