Question

当我加载它时，我的meteor项目一直在崩溃我的浏览器。如果我在App.jsx文件中注释掉tabMode，我只能避免浏览器崩溃。有人可以告诉我如何修复我的代码，以便项目可以加载而不会崩溃，如果你点击this.setState({input_36:currentApp.input_36});中的任何超链接，它将重新呈现表单？并确保链接符合WCAG并通过确保<ul>属性存在来优化搜索引擎？

这是我的项目......在终端命令行中我做了

href=

然后我的项目中有以下文件

crudapp.html

meteor create crudapp
cd crudapp
rm crudapp.js
meteor remove autopublish
meteor add react
meteor add iron:router

crudapp.jsx

<head>
  <title>Application Form</title>
</head>
<body>
  <div id="render-target"></div>
</body>

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>
    );
  }
});

然后我转到命令行并输入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。该项目将重新编译。然后我进入我的网络浏览器，因为带有错误信息的无限循环而冻结了

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

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

Answer 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

Answer 2

可能更改为＆＃34; onClick = {_ this.clickLoadForm.bind（_this，_this.props.router.params.appid）}＆＃34;

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

2 个答案: