Как отправить данные в базу данных с помощью Fetch API в React.js

Question

Недавно я узнал, как настроить простой API на моем экспресс-сервере, используя базу данных localhost mySQL, которую я использую на сервере MAMP. После того, как я это настроил, я узнал, как заставить React.js извлекать эти данные и отображать их. Теперь я хочу сделать обратное и опубликовать данные из формы, которую я создал в React.js. Я хотел бы продолжить использовать API выборки для публикации этих данных. Вы можете посмотреть мой код ниже.

Ниже приведен код моего экспресс-сервера для моего API.

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

Я уже настроил форму и создал для нее функции отправки и обмена. Когда я отправляю данные, они просто оповещаются. Я хотел бы разместить эти данные в базе данных. 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;

Answer 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));
 });
});