如何使用 React.js 中的 Fetch API 将数据发布到数据库

Posted 2023-02-24

【中文标题】如何使用 React.js 中的 Fetch API 将数据发布到数据库

【英文标题】：How to Post data to database using Fetch API in React.js

【发布时间】：2019-06-15 11:51:07

【问题描述】：

我最近学习了如何使用我在 MAMP 服务器上运行的 localhost mysql 数据库在我的 express 服务器中设置一个简单的 api。设置好之后，我学会了如何让 React.js 获取数据并显示它。现在我想做相反的事情并从我在 React.js 中创建的表单中发布数据。我想继续使用 fetch API 来发布该数据。您可以在下面查看我的代码。

以下是我的 api 的快速服务器代码。

  app.get('/api/listitems', (req, res) =>    
    connection.connect();  
    connection.query('SELECT * from list_items', (err,results,fields) => 
      res.send(results)
    )
    connection.end();
  );

我已经设置了表单并为表单创建了提交和 onchange 函数。当我提交数据时，它只是放在警报中。我希望将这些数据发布到数据库中。 IBelow 是 React App.js 代码。

import React,  Component  from 'react';
import './App.scss';

class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      items: [],
      formvalue: ''
    ;
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  

  handleData = () => 
    fetch('http://localhost:5000/api/listitems')
    .then(response => response.json())
    .then(data => this.setState( items: data ));
  

  handleChange(event) 
    this.setState(formvalue: event.target.value);
  

  handleSubmit(event) 
    alert('A list was submitted: ' + this.state.formvalue);
    event.preventDefault();
  

  componentDidMount() 
    this.handleData();
  

  render() 
    var formStyle = 
      marginTop: '20px'
    ;
    return (
      <div className="App">
          <h1>Submit an Item</h1>
          <form onSubmit=this.handleSubmit style=formStyle>
            <label>
              List Item:
              <input type="text" value=this.state.formvalue onChange=this.handleChange />
            </label>
            <input type="submit" value="Submit" />
          </form>
          <h1>Grocery List</h1>
          this.state.items.map(
            (item, i) => 
              <p key=i>item.List_Group: item.Content</p>
            )
        <div>
      </div>
    </div>
    );
  


export default App;

【问题讨论】：

MDN 实际上有一个很好的例子in their docs。

post 请求的终点是什么？

'http://localhost:5000/api/listitems'

【参考方案1】：

您可以执行以下操作

handleSubmit (event) 
  //alert('A list was submitted: ' + this.state.formvalue);
  event.preventDefault();
  fetch('your post url here', 
    method: 'POST',
    headers: 
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    ,
    body: JSON.stringify(
      id: this.state.id,
      item: this.state.item,
      itemType: this.state.itemType
    )
  )
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err);

我的工作岗位端点在下面。

app.post('/api/listitems', (req, res) => 
  var postData  = req.body;
  connection.query('INSERT INTO list_items SET ?', postData, (error, results, fields) => 
    if (error) throw error;
    res.end(JSON.stringify(results));
  );
);

【讨论】：

只是一个关于这个的问题。我的 mySQL 表是这样设置的。行 => ID、项目、项目类型、日期。如果我的表单只有一个字段，可以说接受一个新的 ItemType 值。 handleSubmit 如何知道将这些数据放在哪里。同样，我对通过网络获取数据还是很陌生，我只是想更好地理解这一点。

我虽然 state formValue 是一个对象。您需要在 handleSubmit 中手动构造一个包含相关数据的对象，并将数据对象传递给 fetch post 请求正文中的 JSON.stringify(data)

请检查我更新的代码。您可以使用要发送到后端的所有值构造一个对象

我构建了对象并在状态中添加了一些填充文本。当我运行 handleSubmit 函数时，它会在控制台中抛出这些错误。不知道这意味着什么。 POST http://localhost:5000/api/listitems 404 (Not Found) App.js:49 SyntaxError: Unexpected token < in JSON at position 0 Fetch failed loading: POST "http://localhost:5000/api/listitems".

是的，你写的。我的帖子端点设置不正确。现在它已设置好，所有内容都可以正常发布到数据库中。