jquery - 未捕获的 RangeError：超出最大调用堆栈大小 - 从 Preact 前端发布到 Ruby API 时出错

Question

我的浏览器最终冻结，然后在我尝试注册时给我这个错误。这是我第一次使用带有 rails api 的 preact 前端（也是我第一次在 stackoverflow 上发帖）。如果您需要更多信息，请告诉我。

import { h, Component } from 'preact';
import $ from 'jquery';

class Signup extends Component {
    handleClick = (e) => {
      e.preventDefault();
      // console.log(this.password.value)
       var firstName = this.first_name;
       var lastName = this.last_name;
       var userName = this.userName;
       var email = this.email;
       var password = this.password;

      $.ajax({
        url: 'http://localhost:3000/users',
        type: 'POST',
        data: { user: { first_name: firstName, last_name: lastName, userName: userName, email: email, password: password } },
        success: (response) => {
          console.log('it worked!', response);
        },
        error: (response) => {
          console.log('it failed', response);
        }
        });
      }

      render() {
        return (
          <div className="sign-up">
            <br></br>
            <br/>
            <h2>Sign Up</h2>
            <br/>
            <form onSubmit={this.handleClick} method="get">
            <ul>
              <li> First name: <input ref={a => this.first_name = a} type="text" name="first_name"/> </li> <br/>
              <li> Last name: <input ref={b => this.last_name = b} type="text" name="last_name"/> </li> <br/>
              <li> Username: <input ref={ c => this.username = c} type="text" name="userName"/> </li> <br/>
              <li> Email: <input ref={d => this.email = d} type="text" name="email"/> </li> <br/>
              <li> Password: <input ref={e => this.password = e} type="password" name="password"/> </li> <br/>
            <input type="submit" value="Sign Up"/>
            </ul>
            </form>
          </div>
          )
        }
}

export default Signup;

来自 Chrome 开发工具的错误图片

Answer 1

我最终更改了一堆代码并使用 fetch 而不是 jquery。看看下面。感谢大家的意见。

import { h, Component } from 'preact';

// 从 'jquery' 导入 $; 从'axios'导入axios；

class Signup extends Component {
  handleClick = (e) => {
    e.preventDefault();
    var url = 'http://localhost:3000/users',
      data= JSON.stringify({
        user: {
          first_name: this.firstName.value,
          last_name: this.lastName.value,
          username: this.userName.value,
          email: this.email.value,
          password: this.password.value,
        }
      });

    fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: data
    })
    .then( res => res.json())
    .then( jsonRes => window.location = "/login")
    .catch( err => console.log(err))
}

render() {
  return (
    <div className="sign-up">
      <br></br>
      <br/>
      <h2>Sign Up</h2>
      <br/>
      <form onSubmit={this.handleClick} method="get">
      <ul>
        <li> First name: <input ref={a => this.firstName = a} type="text"/> </li> <br/>
        <li> Last name: <input ref={b => this.lastName = b} type="text"/> </li> <br/>
        <li> Username: <input ref={ c => this.userName = c} type="text"/> </li> <br/>
        <li> Email: <input ref={d => this.email = d} type="text"/> </li> <br/>
        <li> Password: <input ref={e => this.password = e} type="password"/> </li> <br/>
        <input type="submit" value="Sign Up"/>
      </ul>
      </form>
    </div>
  )
}
}

export default Signup;