meteor - 既存の状態遷移中は更新できません

Question

meteor プロジェクトをロードすると、ブラウザーがクラッシュし続けます。this.setState({input_36:currentApp.input_36});App.jsx ファイルでコメントアウトした場合にのみ、ブラウザのクラッシュを回避できます。<ul>プロジェクトがクラッシュせずに読み込まれ、のハイパーリンクをクリックするとフォームが再レンダリングされるようにコードを修正する方法を誰か教えてもらえますか? href=また、リンクが WCAG に準拠しており、属性が存在することを確認して検索エンジンが最適化されていることを確認してください。

これが私のプロジェクトです...ターミナルコマンドラインで

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

次に、プロジェクトに次のファイルがあります

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

アプリ = React.createClass({
  ミックスイン: [ReactMeteorData],

  getMeteorData() {
    戻る {
      アプリケーション: Applications.find({}, {sort: {createdAt: -1}}).fetch(),
    }
  }、
  getInitialState: 関数() {
    this.loadForm(this.props.router.params.appid) を返します。
  }、
  loadForm(appId) {
    var currentApp = Applications.findOne({_id:appId});
    if(!currentApp) currentApp = {};
    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}>バージョン {applicationform._id}</a></li>;
    });
  }、

  handleSubmit(イベント) {
    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: 関数(e) {
      this.setState({ input_36: e.target.value });
        }、
  与える（） {
    戻る （
      <div className="コンテナ">
          <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">送信</button>
          </フォーム>
      </div>
    );
  }
});

次に、コマンドラインに移動して入力meteorし、プロジェクトを起動します。次に、Web ブラウザーに移動します。テキストフィールドが表示されるので、何かを入力して Enter キーを数回押すと、作成した各フォームのリストが自動的に表示されます。

次に、太字の行のコメントを外して App.jsx を変更します。プロジェクトが再コンパイルされます。次に、Web ブラウザーにアクセスすると、エラーメッセージが表示される無限ループのためにフリーズします。

既存の状態遷移中 (「render」内など) は更新できません。Render メソッドは props と state の純粋な関数でなければなりません。

プロジェクトをロードし、リンクをクリックするとフォームが再レンダリングされるように、この状況を修正するにはどうすればよいですか?

meteor - 既存の状態遷移中は更新できません

2 に答える 2

Related

Reference