带有react.js对象的POST请求发送空值

Question

我正在尝试为具有Java / spring引导后端的项目设置React前端。获取请求非常简单，我可以进行POST请求调用，但是存储在数据库中的值为NULL。反应很新，不胜感激

使用axios的react请求

    import React from 'react';
import axios from 'axios';

export default class PostRequest extends React.Component {
  state = {
    firstname: '',
    lastname: '',
    biography: '',
    email: '',
  }

  handleChange = event => {
    this.setState({ firstname: event.target.value });
    this.setState({ lastname: event.target.value });
    this.setState({ biography: event.target.value });
    this.setState({ email: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const author = {
      firstname: this.state.firstname,
      lastname: this.state.lastname,
      biography: this.state.biography,
      email: this.state.email
    };

    axios.post(`http://localhost:8088/authorsrest`, { author })
      .then(res => {
        console.log(res);
        console.log(res.data);
        console.log("meh");
        console.log(author);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            First Name:
            <input type="text" name="firstname" onChange={this.handleChange} />
          </label>
          <label>
            Last  Name:
            <input type="text" name="lastname" onChange={this.handleChange} />
          </label>
           <label>
            Last  Name:
            <input type="text" name="biography" onChange={this.handleChange} />
          </label>
           <label>
            Last  Name:
            <input type="text" name="email" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

我的控制器中的发布请求

    @RequestMapping(method = RequestMethod.POST)
    @ResponseStatus(HttpStatus.CREATED)
    public void createNewAuthor(@RequestBody @Validated Author author) throws AuthorAlreadyRegisteredException {
        author = new Author();
        authorService.create(author);

    }

我已将author类中的所有字段设置为可空，这只是一个标准模型类

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;

@Entity
public class Author {

    @Id
    @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "author_gen")
    @SequenceGenerator(name = "author_gen", sequenceName = "AUTHOR_SEQ", allocationSize = 1)
    private long authorId;

    @Column( length = 80)
    private String firstname;

    @Column( length = 80)
    private String lastname;

    @Column(length = 250)
    private String biography;

    @Column( length=50)
    private String email;



    public Author(String firstname, String lastname, String biography, String email) {
        super();
        this.firstname = firstname;
        this.lastname = lastname;
        this.biography = biography;
        this.email = email;
    }

    public Author() {
    }

    public String getFullName() {
        return this.firstname + " " + this.lastname;
    }

    public long getAuthorId() {
        return authorId;
    }

    public void setAuthorId(long authorId) {
        this.authorId = authorId;
    }

    public String getFirstname() {
        return firstname;
    }

    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }

    public String getLastname() {
        return lastname;
    }

    public void setLastname(String lastname) {
        this.lastname = lastname;
    }

    public String getBiography() {
        return biography;
    }

    public void setBiography(String biography) {
        this.biography = biography;
    }



    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + (int) (authorId ^ (authorId >>> 32));
        result = prime * result + ((biography == null) ? 0 : biography.hashCode());
        result = prime * result + ((email == null) ? 0 : email.hashCode());
        result = prime * result + ((firstname == null) ? 0 : firstname.hashCode());
        result = prime * result + ((lastname == null) ? 0 : lastname.hashCode());
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Author other = (Author) obj;
        if (authorId != other.authorId)
            return false;
        if (biography == null) {
            if (other.biography != null)
                return false;
        } else if (!biography.equals(other.biography))
            return false;
        if (email == null) {
            if (other.email != null)
                return false;
        } else if (!email.equals(other.email))
            return false;
        if (firstname == null) {
            if (other.firstname != null)
                return false;
        } else if (!firstname.equals(other.firstname))
            return false;
        if (lastname == null) {
            if (other.lastname != null)
                return false;
        } else if (!lastname.equals(other.lastname))
            return false;
        return true;
    }

    @Override
    public String toString() {
        return "Author [authorId=" + authorId + ", firstname=" + firstname + ", lastname=" + lastname + ", biography="
                + biography + ", email=" + email + "]";
    }


}

发布请求进入数据库，但是字段（生成的ID除外）为空

控制台显示author对象具有值

有人可以建议吗？

正在更新以添加网络选项卡的屏幕快照，它显示状态201已创建，数据库显示已添加行-但值是NULL

Answer 1

您对接收到的值做任何事情吗？看来您只是在异步响应上下文中打印它们。

Answer 2

所以我可以在react文件中进行一些更改

import React from 'react';
import axios from 'axios';

export default class PostRequest extends React.Component {
  state = {
    author: [],
  }

  handleChange = event => {
   this.setState({[event.target.name]: event.target.value})
  }

  handleSubmit = event => {
    event.preventDefault();

    const author = {
      firstname: this.state.firstname,
      lastname: this.state.lastname,
      biography: this.state.biography,
      email: this.state.email
    };

    axios.post(`http://localhost:8088/authorsrest`, this.state)
      .then(res => {
        console.log(this.state);
        console.log(res);
        console.log(res.data);
        console.log("meh");
        console.log(author);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            First Name:
            <input type="text" name="firstname" onChange={this.handleChange} />
          </label>
          <label>
            Last  Name:
            <input type="text" name="lastname"  onChange={this.handleChange} />
          </label>
           <label>
            Last  Name:
            <input type="text" name="biography"  onChange={this.handleChange} />
          </label>
           <label>
            Email:
            <input type="text" name="email"  onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

我认为做魔术的那条线是

    axios.post(`http://localhost:8088/authorsrest`, this.state)

其余的只是清洁一点

Answer 3

当您在db中获得null时，首先需要检查是否从客户端传递了null值？要对其进行检查，您应该使用Windows的 jest.spyOn(pgClient, 'query').mockImplementation(() => Promise.resolve({ rows: [...] }) ); 和Mac的getattr(phonebook[find_name], find_info) 打开浏览器控制台。然后单击“网络”选项卡，然后单击左侧的api调用。之后，将在右侧打开详细信息。在标题上，转到Ctrl+Shift+I，以检查您传递给api的数据。请检查屏幕（由于我无法在评论中上传屏幕，因此我将其放在此处）

Answer 4

请检查您的后端代码。当您没有在 @CrossOrigin(origins = "{*}") 中指定 URL 类型时会发生这种情况。当您使用 Spring Security 时，您将自动指定允许使用哪些类型的 URL。