状态未定义:从react app发送发布请求时

问题描述

我是React的新手，尝试从React App发送帖子请求时，尝试将帖子请求发送到api并获得未定义的状态，这是因为状态将数据存储为对象.不知道如何解决这个问题.我真的很感谢您的帮助.

I am new in react and trying to send post request to an api and getting state undefined while sending post request from react app, i this occurs because state stores data as an object. Dont know how to solve this. i would really appreciate some help.

compmonent.js

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

谢谢

推荐答案

您的代码看起来还可以，

Your code looks ok,

我已经根据您的代码创建了一个可运行的代码段，只有当 state 为 null 而不是 undefined 的时候，t填写表格并提交，

I've created a runnable code snippet from your code, only time state is null and not undefined, is when you don't fill-up the form and submit,

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

for that you can put a condition before making fetch request.

您可以运行以下代码段并进行检查:

You can run the below code snippet and check :

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 app发送发布请求时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！