使用流星错误太多递归并做出反应

Question

我正在尝试在 React 中制作一个简单的组件来填写表单，但是当我运行它时，控制台显示错误 too much recursion

我已经尝试删除 handleSubmit 上的 event.preventDefault() 但那没有用，我还尝试使用 {this.props.currentUser ? (<form>...</form>) : ""

封装表单

我的代码是下一个：

      <form onSubmit={this.handleSubmit.bind(this)}>
          <div className="form-group">
            <label htmlFor="productName">Product name:</label>
            <input
              className="form-control"
              type="text"
              ref="productName"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="productName">Product description:</label>
            <input
              className="form-control"
              type="text"
              ref="productDescription"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="productName">Minimum amount increase</label>
            <input
              className="form-control"
              type="text"
              ref="minIncrease"
              required
            />
          </div>
          <input className="btn btn-primary" type="submit" value="Submit" />
        </form>

和handleSubmit

handleSubmit(event) {
    event.preventDefault();

    // Find the txt field via React ref
    const productName = ReactDOM.findDOMNode(this.refs.productName);
    const productDescription = ReactDOM.findDOMNode(
      this.refs.productDescription
    );
    const minIncrease = ReactDOM.findDOMNode(this.refs.minIncrease);

    Meteor.call(
      "auctions.insert",
      productName,
      productDescription,
      minIncrease
    );

    Auctions.insert({
      productName, // product name
      productDescription, // product description
      minIncrease, // minimum increase
      value: 0, // initial value
      winner: "", // actual winner
      owner: Meteor.userId, // _id of logged in user
      username: Meteor.user().username, // username of logged in user
      createAt: new Date() // current time
    });

    // Clear form
    ReactDOM.findDOMNode(this.refs.productName).value = "";
    ReactDOM.findDOMNode(this.refs.productDescription).value = "";
    ReactDOM.findDOMNode(this.refs.minIncrease).value = "";
  }

Answer 1

我发现了错误，是 handleSubmit 中缺少 .value.trim()

正确的代码是：

handleSubmit(event) {
    event.preventDefault();

    // Find the txt field via React ref
    const productName = ReactDOM.findDOMNode(
      this.refs.productName
    ).value.trim();
    const productDescription = ReactDOM.findDOMNode(
      this.refs.productDescription
    ).value.trim();
    const minIncrease = ReactDOM.findDOMNode(
      this.refs.minIncrease
    ).value.trim();
...
}

使用流星错误太多递归并做出反应

Error too much recursion using meteor and react

meteor

reactjs