Javascript 将post方法从react发送到express server

Javascript 将post方法从react发送到express server,javascript,node.js,reactjs,express,post,Javascript,Node.js,Reactjs,Express,Post,我有一个应用程序,在前端运行react,在后端运行express 我想从前端将1发布到后端服务器。但我正在和这个问题作斗争 post方法 我没有得到任何错误 我可以在react应用程序中控制台来自后端服务器的数据。它工作顺利。在 我指的是重要的部分 应用程序的逻辑 这是一个石头剪刀布游戏,允许用户玩对电脑 React使用裁判功能进行评估,如果球员获胜,则裁判功能输出1 如果计算机获胜,则输出2 然后,如果裁判员功能输出1且computerChoice有一个值,则该功能 sendOne被触发 这个

我有一个应用程序,在前端运行react,在后端运行express

我想从前端将1发布到后端服务器。但我正在和这个问题作斗争

post方法

我没有得到任何错误

我可以在react应用程序中控制台来自后端服务器的数据。它工作顺利。在

我指的是重要的部分

应用程序的逻辑

这是一个石头剪刀布游戏,允许用户玩对电脑

React使用裁判功能进行评估,如果球员获胜,则裁判功能输出1

如果计算机获胜,则输出2

然后,如果裁判员功能输出1且computerChoice有一个值,则该功能

sendOne被触发

这个函数应该使用fetch函数将一个(表示用户的分数)发送到后端

提前感谢您的任何帮助

 const regular = require("./model/regular"),
  http = require("http"),
  express = require("express"),
  app = express(),
  cors = require("cors"),
  bodyParser = require("body-parser"),
  middleWareBodyParser = bodyParser.urlencoded({ extended: false }),
  mongoose = require("mongoose"),
  Regular = require("./model/regular"),
  //Bonus = require("./model/user"),
  dbIndentification = require("./db-indentification"),
  port = process.env.PORT || 5000,
  //port = http://localhost:5000 (not working)
  db = dbIndentification;
app.use(express.json());
app.use(
  cors({
    origin: port,
    optionsSuccessStatus: 200,
  })
);
app.use(function(req, res, next) {
  //Enabling CORS
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, x-client-key, x-client-token, x-client-secret, Authorization"
  );
  next();
});

app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);

//app.use("/", router);
mongoose.connect(db, { useUnifiedTopology: true, useNewUrlParser: true });
app.post("/", middleWareBodyParser, (req, res) => {
  console.log(req);
});
let score = {};
new Regular(score).save();
//Get information from database and send to the front
let obj = Regular.find({ regular: 1 }, function(err, docs) {
  if (err) {
    console.log(err);
  } else {
    console.log("First function call : ", docs);
    app.get("/", function(req, res) {
      res.send({ backEnd: docs });
    });
  }
}).countDocuments();
const server = http.createServer(app);
server.listen(5000);

前端代码

import React, { Fragment, useState, useEffect, useRef } from "react";
import Bonus from "./bonus";
import Regular from "./regular";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import paperIcon from "./buttons/paper-icon";
import regeneratorRuntime from "regenerator-runtime";
import axios from "axios";

export default function Main() {
  const [response, setResponse] = useState(0);
  const [userChoice, setUserChoice] = useState("");
  const [computerChoice, setComputerChoice] = useState("");
  const [toggle, setToggle] = useState(true);

  const ENDPOINT = "http://localhost:5000/";

  const [showLoading, setShowLoading] = useState(false);
  const timerToClearSomewhere = useRef(null);
  //Send the pathname to the main page each time you reload the page.
  window.history.replaceState(null, "Main", "/");
  const [data, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(ENDPOINT);
      setData(result.data);

      setResponse(result.data.backEnd);
    };
    fetchData();
  }, []);

  console.log("response :" + response);

  function referee() {
    var training = {};
    function learn(winner, loser) {
      if (!training[winner]) training[winner] = {};
      training[winner][loser] = 1;
    }
    const judge = (play1, play2) => {
      let playerOne = 1;
      let playerTwo = 2;
      if (play1 === play2) {
        return "tie";
      }
      return training[play1][play2] === 1 ? playerOne : playerTwo;
    };
    const validate = (choice) => {
      return choice in training;
    };
    const choices = () => {
      return Object.keys(training);
    };
    return {
      learn: learn,
      judge: judge,
      validAction: validate,
      getChoices: choices,
    };
  }

  let ref = referee();
  ref.learn("rock", "scissors");
  ref.learn("paper", "rock");
  ref.learn("scissors", "paper");
  const changeToggle = (e) => {
    setToggle((state) => !state);
  };
  const result = () => {
    if (computerChoice != "") {
      let result = ref.judge(userChoice, computerChoice);
      if (result === 1) {
        console.log(result);
        const sendOne = () => {
          const body = JSON.stringify({user:1}); /////////////////>>>>> HERE
          const options = {
            method: "POST",
            headers: { "content-type": "application/x-www-form-urlencoded" },
            body,
            ENDPOINT,
          };

          fetch(options)
            .then((response) => {
              console.log("sent");
            })
            .catch((er) => {
              console.log(er);
            });
        };
        sendOne();
      }
    }
  };
  result();
  let display = {};
  const toggleFunction = () => {
    if (toggle) {
      return (display = { display: "block" });
    } else {
      return (display = { display: "none" });
    }
  };
  toggleFunction();

  vtps: return (
    <Fragment>
      <Router>
        <div className={"main"}>
          <nav>
            <ul style={display}>
              <li>
                <Link
                  to={"/regular"}
                  onClick={() => {
                    setToggle((state) => !state);
                  }}
                >
                  {"Regular"}
                </Link>
              </li>
              <li>
                <Link
                  to={"/bonus"}
                  onClick={() => {
                    setToggle((state) => !state);
                  }}
                >
                  {"Bonus"}
                </Link>
              </li>
            </ul>
          </nav>
          <Switch>
            <Route
              path={"/regular"}
              render={() => (
                <Regular
                  userchoice={userChoice}
                  setuserchoice={setUserChoice}
                  toggle={toggle}
                  onClick={changeToggle}
                  computerchoice={computerChoice}
                  setcomputerchoice={setComputerChoice}
                  referee={ref}
                />
              )}
            />
            <Route
              path={"/bonus"}
              render={() => (
                <Bonus toggle={toggle}  onClick={changeToggle} />
              )}
            />
          </Switch>
        </div>
      </Router>
    </Fragment>
  );
}

 "name": "cv",
  "version": "1.0.0",
  "private": true,
  "proxy": "http://localhost:5000/",
  "description": "Mansan's CV",
  "main": "index.js",