问提交Express Backend Post请求以添加到Firebase Cloud Firestore的React按钮

EN

const express = require('express');
const app = express();
const port = 8000
const cors = require("cors")
const db = require('./firebase');
app.use(express.json());
app.use(cors());
const stores = [
    {
        author: 'John Snape',
        title: 'Random Book'
    },
    {
        author: 'Herman Melville',
        title: 'Moby Dick'
    },
    {
        author: 'William Shakespeare',
        title: 'Hamlet'
    },
    {
        author: 'Homer',
        title: 'The Iliad'
    },
    {
        author: 'Albert Camus',
        title: 'The Stranger'
    },
    {
        author: 'George Eliot',
        title: 'Middlemarch'
    },
    {
        author: 'Charles Dickens',
        title: 'Great Expectations'
    },
    {
        author: 'William Faulkner',
        title: 'The Sound and the Fury'
    },
]
//Getting documents in collection "books"
app.get("/books/get", async (req, res) => {
    const snapshot = await db.collection("books").get();
    const books = [];

    snapshot.forEach((doc) => {
        books.push({ ...doc.data(), id: doc.id });
    });
    res.send(books);
});
//Post request for adding document to Firestore Collection "books"
app.post("/books/add", async (req, res) => {
    const { title, author } = req.body;

    const resp = await db.collection("books").add({
        title: req.body.title,
        author: req.body.author,
    });
    res.sendStatus(200);
    
});
//accessing the mock data
app.get("/api/stores", function(req, res){
    res.json(stores)
})
//querying for a specific title
app.get("/api/stores/:title", function(req, res){
    const query = req.params.title;
    var result=null;
    for(var index = 0; index<stores.length; index++){
        var item = stores[index];
        if(item.title === query){
            result = stores[index];
        }
    }
    res.send(result);
});



app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
});

import React, { Component } from 'react';


export default class Search extends Component{
    constructor(props){
        super(props)
        this.state = {
            results: [],
            author: '',
            title: '',
        };
    }
//the below fetch is a get request that gets the elements from the stores variable in the express server.
    componentDidMount(){
        fetch('/api/stores')
        .then(res => res.json())
        .then(results => this.setState({results}, ()=> console.log('Books fetched...', results)));
    }
    

    render() {
        return (
          <div>
            <h2>result</h2>
            <ul>
            {this.state.results.map(resu => 
              <li key={resu.id}>{resu.title} - {resu.author}
              <button/>
              </li>
            )}
            </ul>
          </div>
        );
      }
    }