如何使用REACTJS，NODEJS，EXPRESSJS和MONGODB的API来做POST数据？_未使用NodeJS、ExpressJS和EJS保存到MongoDB数据库的数据_如何结合使用MongoDB/Nodejs和Express来检索基于JavaScript的游戏的保存数据？ - 腾讯云开发者社区

要使用ReactJS、Node.js、Express.js和MongoDB来创建一个处理POST数据的API，你需要完成以下几个步骤：

1. 设置项目环境

首先，确保你已经安装了Node.js和npm（Node包管理器）。然后，你可以使用以下命令来初始化一个新的Node.js项目：

mkdir my-api-project
cd my-api-project
npm init -y

2. 安装必要的依赖

你需要安装Express.js作为你的服务器框架，Mongoose作为MongoDB的对象模型工具，以及body-parser来解析传入请求的JSON数据。

npm install express mongoose body-parser

3. 创建Express服务器

在你的项目根目录下创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();

// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

// 使用body-parser中间件来解析JSON请求体
app.use(bodyParser.json());

// 定义数据模型
const DataSchema = new mongoose.Schema({
  name: String,
  value: String
});

const DataModel = mongoose.model('Data', DataSchema);

// 创建POST路由来接收数据
app.post('/api/data', (req, res) => {
  const newData = new DataModel(req.body);
  newData.save((err, data) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(201).send(data);
    }
  });
});

// 设置服务器监听端口
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

4. 创建React前端

在你的项目根目录下创建一个新的React应用（如果你还没有安装Create React App，你需要先安装它）：

npx create-react-app client

然后，在client/src目录下创建一个名为Api.js的文件，用于发送POST请求：

import React, { useState } from 'react';

function Api() {
  const [name, setName] = useState('');
  const [value, setValue] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch('/api/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name, value }),
    });

    if (response.ok) {
      const data = await response.json();
      console.log(data);
    } else {
      console.error('Error:', response.statusText);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="text" placeholder="Value" value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Api;