在 React 中使用 AJAX 将 JSON 表单数据发布到 REST api 时出错 [重复]

Question

我使用 React 制作了一个简单的注册页面，并希望将表单数据发送到 rest api。我已经包含了 react.min.js、react-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 位置 1 在 JSON.parse() 在 t.submit (eval at transform.run (file:///media/amit/New%20Volume1/Project/js/browser.min.js:4:28103), :93:25) 在 Object.r (file:///media/amit/New%20Volume1/Project/js/react.min.js:14:18287) 在 (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:23308) 在 Object.u [as executeDispatchesInOrder] (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:23523) 在 p (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:20011) 在 f (file:///media/amit/New%20Volume1/Project/js/react.min.js:12:20137) 在 Array.forEach （本机） 在 r (file:///media/amit/New%20Volume1/Project/js/react.min.js:16:3700) 在 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);