Не удается обновить во время существующего перехода состояния
Мой метеоритный проект продолжает сбой моего браузера, когда я загружаю его. Я могу избежать сбоя браузера, только если закомментируюthis.setState({input_36:currentApp.input_36}); в файле App.jsx. Может кто-нибудь сказать мне, как исправить мой код, чтобы проект мог загружаться без сбоев, и если вы нажимаете на любые гиперссылки в<ul>, он будет повторно визуализировать форму? И убедитесь, что ссылки соответствуют WCAG и поисковая система оптимизирована, обеспечиваяhref= атрибут есть?
Вот мой проект ... в командной строке терминала я делаю
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({
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>
);
}
});Затем я иду в командную строку и набираюmeteor запустить проект. Затем я захожу в свой веб-браузер. Появится текстовое поле, чтобы вы могли что-то набрать и несколько раз нажать клавишу ввода, и автоматически появится список для каждой созданной вами формы.
Затем я модифицирую App.jsx, раскомментировав жирную строку. Проект будет перекомпилирован. Затем я захожу в свой веб-браузер, и он зависает из-за бесконечного цикла с сообщением об ошибке
Невозможно обновить во время существующего перехода состояния (например, в «визуализации»). Методы рендеринга должны быть чистой функцией реквизита и состояния.
Как мне исправить эту ситуацию, чтобы он загрузил проект и щелкнул по ссылкам для повторного рендеринга формы?