Не удается обновить во время существующего перехода состояния

Мой проект метеор продолжает сбой моего браузера, когда я его загружаю. Я могу только избежать сбоя браузера, если я прокомментирую 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, раскомментируя выделенную строку. Проект будет перекомпилирован. Затем я перехожу в свой веб-браузер и замораживается из-за бесконечного цикла с сообщением об ошибке

Невозможно обновить во время существующего перехода состояния (например, внутри «рендеринга»). Методы визуализации должны быть чистой функцией реквизита и состояния.

Как исправить эту ситуацию, чтобы она загрузила проект и щелкнула ссылки, будет повторно отображать форму?

источник

2015-12-25 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}); 
}

Похоже, вы уже выполняете команду clickLoadForm функция, вызывающая запуск this.setState

источник

2015-12-25 17:00:04 oobgam

Я забыл, 'bind' не работает с' React.createClass'. будет обновлять ответ через некоторое время – oobgam

Ваш последний ответ, похоже, не работает. ОДНАКО, когда я изменил 'onClick = {_ this.clickLoadForm (_this.props.router.params.appid)}' to 'onClick = {_ this.clickLoadForm.bind (_this, _this.props.router.params.appid)}' , все, кажется, работает! Предупреждений и форма не отображаются, как ожидалось. – John

@ Джон поздравления! нет проблем, рад, что я смог помочь. :) – oobgam

Не удается обновить во время существующего перехода состояния

ответ

Смежные вопросы