Uncaught Auslöser Range: Maximale Call-Stack-Größe überschritten - Fehler bei der Post zu Ruby-API von pReact Frontend

Question

Mein Browser endet Einfrieren und mir dann geben diesen Fehler, wenn ich versuche, sich anzumelden. Dies ist mein erstes Mal, einen Vorgriff Frontend mit einer Schiene api arbeitet mit (auch meinem ersten Mal Posting auf Stackoverflow). Lassen Sie es mich wissen, wenn Sie weitere Informationen benötigen.

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; 

Picture of Error coming from Chrome Dev Tools

Answer 1

ich ein paar Code zu ändern beendet und statt jquery verwenden holen. Schau es dir unten an. Danke an alle für Ihre Kommentare.

import { h, Component } from 'preact'; 

// Import $ von 'jquery'; Import-Axios von '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;