在现有状态转换期间无法更新
Posted
技术标签:
【中文标题】在现有状态转换期间无法更新【英文标题】：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 的纯函数。
如何解决这种情况，以便它加载项目并单击链接将重新呈现表单？
【问题讨论】：
【参考方案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 恭喜！没有问题，很高兴我能提供帮助。 :)以上是关于在现有状态转换期间无法更新的主要内容，如果未能解决你的问题，请参考以下文章
ReactJS：警告：setState（...）：在现有状态转换期间无法更新
React：在现有状态转换期间无法更新（例如在 `render` 中）。渲染方法应该是 props 和 state 的纯函数
ReactJS：在现有状态转换期间无法更新（例如在 `render` 中）。渲染方法应该是 props 和 state 的纯函数