Ошибка при отправке данных формы JSON в REST api с использованием AJAX в реакторе

Question

Я сделал простую страницу SignUp с помощью React и хочу отправить данные формы в rest api. Я включил в react.min.js, реагирующие-dom.min.js и jquery.min.js .Здесь мой код:

<div id="container"></div> 

<script type="text/babel"> 
    var Signup = React.createClass({ 
     render: function(){ 
     return (<div> 
      <div><label>First Name</label><input type="text" ref="firstname" /></div> 
      <div><label>Middle Name</label><input type="text" ref="middlename" /></div> 
      <div><label>Last Name</label><input type="text" ref="lastname" /></div> 
      <div><label>Email ID</label><input type="email" ref="email" /></div> 
      <div><label>Email Type</label><input type="text" ref="emailtitle" /></div> 

      <div><label>Password</label><input type="password" ref="password" /></div> 
      <div><button onClick={this.submit}>Sign Up</button></div> 
     </div> 
    ); 
    }, 
    submit: function(e){ 
     e.preventDefault() 
     var formdata = { 
     "first_name" : this.refs.firstname.value, 
     "middle_name" : this.refs.middlename.value, 
     "last_name" : this.refs.lastname.value, 
     "email" : this.refs.email.value, 
     "email_title" : this.refs.emailtitle.value, 
     "password" : this.refs.password.value, 

     } 
     var jsondata = JSON.parse(formdata); 
     $.ajax({ 
     url: 'api-url', 
     type: 'POST', 
     dataType: 'JSON', 
     data: jsondata, 


     success: function(data){ 
      console.log(data); 
     }, 
     error: function(xhr, resp, text) { 
      console.log(xhr, resp, text); 
     } 
     }); 
    } 


    }); 

    ReactDOM.render(
     <Signup />, 
     document.getElementById('container') 
    ); 
</script> 

Когда я пытаюсь выполнить это, консоль выдает эту ошибку:

react.min.js:14 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse() at t.submit (eval at transform.run (file:///media/amit/New%20Volume1/Project/js/browser.min.js:4:28103), :93:25) at Object.r (file:///media/amit/New%20Volume1/Project/js/react.min.js:14:18287) at a (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:23308) at Object.u [as executeDispatchesInOrder] (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:23523) at p (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:20011) at f (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:20137) at Array.forEach (native) at r (file:///media/amit/New%20Volume1/Project/js/react.min.js:16:3700) at Object.processEventQueue (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:21091)

Я не могу понять эти ошибки. Кроме того, на данный момент я использовал «#» вместо «api-url». Правильно ли я делаю это? Или есть какой-то другой подход? Я новичок в React, AJAX и т. Д. Помогите.

Answer 1

formdata - это уже объект, вы не должны разбирать его. Попробуйте удалить следующую строку:

var jsondata = JSON.parse(formdata);