在现有状态转换期间无法更新
meteor create crudapp
cd crudapp
rm crudapp.js
meteor remove autopublish
meteor add react
meteor add iron:router
<head>
<title>Application Form</title>
</head>
<body>
<div id="render-target"></div>
</body>
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 = 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>
);
}
});
无法在现有状态转换期间更新（例如在“呈现”中）。呈现方法应该是道具和状态的纯函数。
我如何修复这种情况，使它将加载项目，并单击链接将重新呈现表单？
共有1个答案
John说：将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});
}
-
我已经创建了以下代码，但是我经常得到以下错误（很多）。看起来应用程序进入了一个循环： 下面是我使用的代码：
-
我正在开发一个简单的待办事项列表反应应用程序（新的React.js）。我已经将项目添加到工作列表中，但删除项目会引起一个问题。在我的父反应组件中，我有以下代码： 我的组件： 运行此代码将带来： 警告：setState（...）：无法在现有状态转换期间更新 问题: 为什么的渲染在添加项时立即执行回调，即： 但是，添加以删除Callback ie。
-
当我试图插入一个新的食谱元素时，我的项目总是崩溃。我使用在能够根据需要更新食谱（例如删除，编辑等）。 如果我将语句切换到，我可以插入元素而没有问题，但是由于删除，我无法删除触发状态更改，并需要状态更改来反映更新而不是道具。有人对这个问题有什么建议吗？谢谢！ 配方列表： 配方容器： 配方表：
-
问题内容： 我正在尝试从渲染视图重构以下代码： 到绑定位于构造函数内的版本。原因是渲染视图中的绑定会给我带来性能问题，尤其是在低端手机上。 我创建了以下代码，但是我不断收到以下错误（很多错误）。该应用似乎陷入了循环： 以下是我使用的代码： 问题答案： 看起来您不小心在render方法中调用了该方法，而您可能想这样做。 如果您不想在onClick处理程序中创建lambda，我认为您将需要两个绑定方法
-
我正在重写一些旧的ReactJS代码，但在修复此错误时遇到了麻烦（此错误在控制台中重复大约1700次，DOM根本不呈现）： 警告：设置状态（…）：无法在现有状态转换期间更新（例如在或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到。 我是一个组件，它将它的状态传递给一个应该呈现一些控件的组件。基于单击的控件，状态应该更改，并且应该呈现新的控件。