尝试将表单数据从 React.js 表单发送到 Flask API，但它不允许提交到 MongoDB

Question

我正在尝试制作一个简单的创建用户表单，以便使用 react.js、python(Flask) 和 mongodb 了解 API 的功能。 但是，我不断收到错误消息，即没有任何输入被发送到 Flask 后端。 我有什么办法可以解决这个问题？

这是使用 Flask_Restful 处理帖子的 identity.py

class NewUser(Resource):
def post(self):
    
    name = request.form.get("name")
    email = request.form.get("email")
    password = request.form.get("password")
    user = User(name=name, email=email, password=password)
    if not name:
        return {'Error': "Name Not Included"}, 403
    if not email:
        return {'Error': "Email Not Included"}, 404
    if not password:
        return {'Error': "Password Not Included"}, 405
    user.hash_password()
    user.save()
    id = user.id
    return {'id': str(id)}, 200

这里是来自 React_app 的 app.js 与代理连接。 代理之所以有效，是因为它能够从后端发送标题而不会出现任何错误。

    import React, {Component} from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      password: '',
      titleData: [],
      userData: []
    };
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({
      name: event.target.value,
      email: event.target.value,
      password: event.target.value
    })
  }

  ///Find a way to submit POST form to python_flask
  async handleSubmit(event) {
    event.preventDefault()
    console.log('Submit')
    await fetch('/user/join', {
      method: 'POST'
    })
      .then(res => res.json())
      .then(json => {
        this.setState({
          userData: json
        })
      })
      .catch(() => {
        console.log("Error in Data")
      })
  }

  async getData() {
    await fetch('/get')
      .then(response => response.json())
      .then(json => {
        this.setState({
          titleData: json
        })
      })
  }

  async componentDidMount() {
    this.getData()
  }

  render() {
    return (
      <div className="App">
        <header>
          <h1>{this.state.titleData.title}</h1>
        </header>
        <div>
          <p>heeheehe</p>
          <form onSubmit={this.handleSubmit}>
            <h3>New User? Sign in here!</h3>
            <div>
              <input 
                type="text"
                name="name"
                placeholder="Name"
                value={this.props.value}
                onChange={this.props.handleChange}
              />
            </div>
            <div>
              <input 
                name="email"
                placeholder="Email"
                value={this.props.value}
                onChange={this.props.handleChange}
              />
            </div>
            <div>
              <input
                name="password"
                placeholder="Password"
                value={this.props.value}
                onChange={this.props.handleChange}
              />
            </div>
            <button>Press Me</button>
          </form>
        </div>
      </div>
    )
  }
}

export default App;

Answer 1

`await fetch('/user/join', {
  method: 'POST'
})`

您只是在发出发布请求，而没有向其发送任何内容。 这就是为什么在另一端没有收到任何东西的原因。

请参阅此帖子以了解如何在 React 中发送 fetch post 请求。 如何在 React 中使用带有表单数据的 fetch 发布对象？