在现有状态转换期间无法更新答案

【问题标题】：Cannot update during an existing state transition在现有状态转换期间无法更新
【发布时间】：2016-03-31 14:19:35
【问题描述】：

我的流星项目在我加载它时总是让我的浏览器崩溃。如果我在 App.jsx 文件中注释掉 this.setState({input_36:currentApp.input_36});，我只能避免浏览器崩溃。有人可以告诉我如何修复我的代码，以便项目可以加载而不会崩溃，如果您单击 <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

App = React.createClass({
  混合：[ReactMeteorData]，

  获取流星数据（）{
    返回 {
      应用程序：Applications.find({}, {sort: {createdAt: -1}}).fetch(),
    }
  },
  获取初始状态：函数（）{
    返回 this.loadForm(this.props.router.params.appid);
  },
  loadForm(appId) {
    var currentApp = Applications.findOne({_id:appId});
    if(!currentApp) currentApp = {};
    返回当前应用程序；
  },
  clickLoadForm(appId)
  {
    var currentApp = this.loadForm(appId);
    //this.setState({input_36:currentApp.input_36});
  },
  渲染列表应用程序（）{
    var _this = 这个；
    返回 this.data.applications.map(function(applicationform,i) {
      return

版本{applicationform._id}

; }); }, 处理提交（事件）{ 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); }, 处理改变：函数（e）{ this.setState({ input_36: e.target.value }); }, 使成为（） { 返回（

{this.renderListApplications()}

{JSON.stringify(this.data.currentApplication)}

); } });

然后我进入命令行并输入meteor 来启动项目。然后我去我的网络浏览器。出现一个文本字段，您可以输入一些内容并按几次 Enter，然后会自动显示您创建的每个表单的列表。

接下来我通过取消注释粗体来修改 App.jsx。该项目将重新编译。然后我转到我的网络浏览器，它因为带有错误消息的无限循环而死机

在现有状态转换期间无法更新（例如在“渲染”中）。渲染方法应该是 props 和 state 的纯函数。

如何解决这种情况，以便它加载项目并单击链接将重新呈现表单？

【问题讨论】：

标签： meteor reactjs setstate

【解决方案1】：

可能改为“onClick={_this.clickLoadForm.bind(_this,_this.props.router.params.appid)}”

【讨论】：

一个班轮回答让生活变得困难，回答时更冗长

【解决方案2】：

约翰说：改变 onClick={_this.clickLoadForm(applicationform._id)} 到 onClick={_this.clickLoadForm.bind(_this,applicationform._id)}

如果这不起作用，那么可能是下面的一些变化

尝试将_this.clickLoadForm(_this.props.router.params.appid) 更改为_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});
}

您似乎已经在执行clickLoadForm 函数，从而触发this.setState

【讨论】：

我忘了，bind 不适用于 React.createClass。稍后会更新答案
您的最新答案似乎无效。但是，当我将 onClick={_this.clickLoadForm(_this.props.router.params.appid)} 更改为 onClick={_this.clickLoadForm.bind(_this,_this.props.router.params.appid)} 时，一切似乎都正常了！没有警告，表单会按预期重新呈现。
@John 恭喜！没有问题，很高兴我能提供帮助。 :)