状态未定义：从 React 应用程序发送 post 请求时

Question

我是 React 的新手，正在尝试向 api 发送 post 请求，并在从 React 应用程序发送 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

你的代码看起来没问题，

我已经从你的代码中创建了一个运行nable 代码片段，只有 state 是 null 而不是 undefined 的时候，就是你没有填写的时候-填写表格并提交，

为此，您可以在发出提取请求之前设置条件。

您可以运行下面的代码片段并检查：

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>

状态未定义：从 React 应用程序发送 post 请求时

state undefined: while sending post request from react app

components

reactjs

react-state