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

小编典典

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

reactjs

我的流星项目在加载时不断崩溃。我只能this.setState({input_36:currentApp.input_36});在App.jsx文件中注释掉，才能避免浏览器崩溃。有人可以告诉我如何修复我的代码，以便项目可以加载而不会崩溃，并且如果您单击中的任何超级链接<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

应用= React.createClass（{
  mixins：[ReactMeteorData]，

  getMeteorData（）{
    返回{
      应用程序：Applications.find（{}，{sort：{createdAt：-1}}）。fetch（），
    }
  }，
  getInitialState：function（）{
    返回this.loadForm（this.props.router.params.appid）;
  }，
  loadForm（appId）{
    var currentApp = Applications.findOne（{_ id：appId}）;
    if（！currentApp）currentApp = {};
    返回currentApp;
  }，
  clickLoadForm（appId）
  {
    var currentApp = this.loadForm（appId）;
    //this.setState({input_36:currentApp.input_36}）;
  }，
  renderListApplications（）{
    var _this = this;
    返回this.data.applications.map（function（applicationform，i）{
      返回<li键= {“ li” + i}> <a onClick = {_ this.clickLoadForm（applicationform._id）} href = {Meteor.absoluteUrl（）+'application /'+ applicationform._id}键= {“ a “ + i}>版本{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（）{
    返回（
      <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”>提交</ button>
          </ form>
      </ div>
    ）;
  }
}）;

然后，我进入命令行并键入meteor以启动该项目。然后，我转到我的Web浏览器。出现一个文本字段，以便您可以键入一些内容并按Enter键几次，然后会自动显示您创建的每种表单的列表。

接下来，我通过取消注释粗体行来修改App.jsx。该项目将重新编译。然后，我进入我的网络浏览器，由于出现错误消息的无限循环而死机

在现有状态转换期间（例如在“渲染”中）无法更新。渲染方法应该纯粹是props和state的函数。

我该如何解决这种情况，以便它将加载项目并单击链接将重新呈现该表单？

阅读 217

2020-07-22

共1个答案

小编典典

约翰说：更改
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

2020-07-22