Meteor 无法在现有状态转换期间更新_Meteor_Reactjs_Setstate

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

meteor reactjs

Meteor 无法在现有状态转换期间更新,meteor,reactjs,setstate,Meteor,Reactjs,Setstate,当我加载meteor项目时，它一直会使我的浏览器崩溃。只有注释掉this.setState（{input_36:currentApp.input_36}），才能避免浏览器崩溃。有人能告诉我如何修复我的代码，以便项目可以加载而不会崩溃，并且如果您单击中的任何超链接，它将重新呈现表单吗？通过确保href=属性的存在，确保链接符合WCAG标准并优化搜索引擎这是我的项目…在终端命令行我做 meteor create crudapp cd crudapp rm crudapp.js meteor rem

当我加载meteor项目时，它一直会使我的浏览器崩溃。只有注释掉

this.setState（{input_36:currentApp.input_36}），才能避免浏览器崩溃。有人能告诉我如何修复我的代码，以便项目可以加载而不会崩溃，并且如果您单击中的任何超链接，它将重新呈现表单吗？通过确保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 = 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>
    );
  }
});
Applications=newmongo.Collection（“应用程序”）；
if（Meteor.isServer）
{
Meteor.publish（“应用程序”，函数（）{
返回应用程序。find（）；
});
}
var configAppRoute={waitOn:function（）{return[Meteor.subscribe（'applications'）]}，action:applicationController}；
Router.route（'/application'，configAppRoute）；
Router.route（'/application/：appid'，configAppRoute）；
函数applicationController（）
{
var路由器=这个；
Meteor.startup（函数（）{
ReactDOM.render（；
});
},
handleSubmit（事件）{
event.preventDefault（）；
var refs=this.refs；
var formVals=新对象（）；
Object.key（refs.map）（函数（prop，index）{
if（refs[prop].nodeName.match（/（输入|选择|文本区域）/）.length>0）
formVals[prop]=参考[prop]。值；
});
Meteor.call（“保存应用程序”，formVals）；
},
handleChange:函数（e）{
this.setState（{input_36:e.target.value}）；
},
render（）{
返回(

{this.renderListApplications（）}

{JSON.stringify（this.data.currentApplication）}
提交
);
}
});
然后我转到命令行并键入meteor
启动项目。然后我进入我的网络浏览器。此时会出现一个文本字段，您可以键入一些内容并按enter键几次，然后会自动显示您创建的每个表单的列表
接下来，我通过取消对粗体行的注释来修改App.jsx。该项目将重新编译。然后我转到我的web浏览器，由于带有错误消息的无限循环，它冻结了
无法在现有状态转换期间更新（例如在“渲染”中）。渲染方法应该是道具和状态的纯函数
如何修复这种情况，使其加载项目并单击链接重新呈现表单？John说：
改变
onClick={this.clickLoadForm（applicationform.\u id）}
toonClick={{this.clickLoadForm.bind（{this，applicationform.\u id）}

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

尝试将此更改为。\clickLoadForm（\u this.props.router.params.appid）
更改为\u 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});
}


单击加载表单（e）{
var appId=e.target.dataset.value；
var currentApp=this.loadForm（appId）；
setState（{input_36:currentApp.input_36}）；
}

似乎您已经在执行clickLoadForm
函数，从而触发this.setState
可能会更改为“onClick={{this.clickLoadForm.bind（{this，{this.props.router.params.appid）}”
我忘了，bind
不适用于React.createClass
。将在一段时间内更新答案您的最新答案似乎不起作用。然而，当我将onClick={{this.clickLoadForm（{this.props.router.params.appid）}
更改为onClick={{this.clickLoadForm.bind（{this，{this.props.router.params.appid）}
时，一切似乎都正常了！没有警告，表单按预期重新呈现。@John祝贺您！没问题，很高兴我能帮忙。：）一句话回答让生活变得困难，回答时更加冗长