状态未定义：当从react应用发送post请求时。

Question

我是一个新的反应，并试图发送post请求到api，并得到状态未定义的同时，从反应应用程序发送post请求，我这是由于状态存储数据作为一个对象。我不知道如何解决这个问题，我真的很感激一些帮助。

compmonent.js

import React, { Component } from 'react'

class Register extends Component {

  register () {
    // alert('register')
    console.warn('state', this.state)
    fetch('http://localhost:8000/api/v1/accounts/registration/', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.state)
    }).then((result) => {
      result.json().then((resp) => {
        console.log(resp.data.token)
        localStorage.setItem('register', JSON.stringify(resp.data.token))
      })
    })
  }

  render () {
    return (
      <div>

        <div>
          <label>Email</label>
          <input
            type='text' placeholder='email'
            onChange={(e) => { this.setState({ email: e.target.value }) }}
          /><br /><br />

          <label>First name</label>
          <input
            type='text' placeholder='first name'
            onChange={(e) => { this.setState({ first_name: e.target.value }) }}
          /><br /><br />

          <label>Last name</label>
          <input
            type='text' placeholder='last name'
            onChange={(e) => { this.setState({ last_name: e.target.value }) }}
          /><br /><br />

          <label>Password</label>
          <input
            type='password' placeholder='password'
            onChange={(e) => { this.setState({ password1: e.target.value }) }}
          /><br /><br />

          <label>Confirm password</label>
          <input
            type='password' placeholder='confirm password'
            onChange={(e) => { this.setState({ password2: e.target.value }) }}
          /><br /><br />

          <button onClick={() => this.register()}>Register</button>
        </div>

      </div>

    )
  }
}

export default Register

谢谢

Answer 1

你的代码看起来不错。

我从你的代码中创建了一个可运行的代码片段，只是时间到了 state 是 null 而不是 undefined，就是你不填表，不提交。

为此，你可以在提出fetch请求前设置一个条件。

---

你可以运行下面的代码片段并检查。

class App extends React.Component {

register () {
    // alert('register')
    console.warn('state', this.state)
    if (this.state) { // <------ HERE
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          // Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state)
      }).then((result) => {
        result.json().then((resp) => {
          console.log(resp.data.token)
          localStorage.setItem('register', JSON.stringify(resp.data.token))
        })
      })    
    }

  }

  render () {
    return (
      <div>

        <div>
          <label>Email</label>
          <input
            type='text' placeholder='email'
            onChange={(e) => { this.setState({ email: e.target.value }) }}
          /><br /><br />

          <label>First name</label>
          <input
            type='text' placeholder='first name'
            onChange={(e) => { this.setState({ first_name: e.target.value }) }}
          /><br /><br />

          <label>Last name</label>
          <input
            type='text' placeholder='last name'
            onChange={(e) => { this.setState({ last_name: e.target.value }) }}
          /><br /><br />

          <label>Password</label>
          <input
            type='password' placeholder='password'
            onChange={(e) => { this.setState({ password1: e.target.value }) }}
          /><br /><br />

          <label>Confirm password</label>
          <input
            type='password' placeholder='confirm password'
            onChange={(e) => { this.setState({ password2: e.target.value }) }}
          /><br /><br />

          <button onClick={() => this.register()}>Register</button>
        </div>

      </div>

    )
  }
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>