Блог

Я использую react/express.

У меня есть простая веб-страница, которая принимает пользовательский ввод и сохраняет его в SQL с помощью axios.post . В моем бэкэнде мне нужно получить доступ к этой пользовательской переменной в моем get , чтобы я мог фильтровать то, что нужно отправить обратно пользователю.

Мне не удалось заставить функцию возврата работать, и я не хочу использовать глобальные переменные, так как это приводило к ошибкам раньше.

Я чего-то не понимаю? Как я могу получить доступ к переменной из моего get запроса из моего post запроса.

frontend.js

 import React from 'react';
import { useState, useEffect } from "react";
import Calendar from 'react-calendar';
//import 'react-calendar/dist/Calendar.css';
import Axios from 'axios'; 

const CalendarApp = () => {
  var [selectedDate, newDate] = useState(new Date());
  const [event, newEvent] = useState("")
  const [userEvent, setUserEvent] = useState("")
  const [userEventList, setUserEventList] = useState([])
  const [newUserEvent, setNewUserEvent] = useState("")

//Add event to DB
  const addUserEvent = () => {
    var userDate = (selectedDate   "").slice(3, 16);
    console.log("From addUserEvent", userDate)
    if (userEvent === "") {
      //alert("Please enter event")
    }
    else {
      Axios.post("http://localhost:3001/send", {
        userEvent: userEvent, userDate: userDate
      }).then(() => {
        //setUserEventList([...userEventList, { userEvent: userEvent, userDate: userDate}])
      });
      // changes the event list depending on what date the user clicks 
      document.getElementById('ui').value = '';
      setUserEvent(userEvent => userEvent = "")
    }
  };

  const getUserEvent = (userDate) => {
    Axios.get("http://localhost:3001/getData").then((response) => {
      setUserEventList(response.data)
      console.log("response.data: ", response.data)
    });
  };
}

 

backend.js

 //Setting up express, similar to flask
const express = require('express'); 
const app = express() 
const mysql = require('mysql'); 
const cors = require('cors')  

//Setting up SQL, hide password properly 
const db = mysql.createConnection({
    host:'localhost',
    user: 'root',
    password: '******',
    database: 'calendardb',
});

app.use(cors());
app.use(express.json()); 

// insert information in to DB
app.post('/send',(req,res) =>{
    const userEvent = req.body.userEvent
    const userDate = req.body.userDate //<---- Access this variable from the get below
    currentDate = req.body.userDate
    console.log("FROM DB ADD",userDate,"d",currentDate)
    db.query('INSERT INTO calevent (userEvent, userDate) VALUES (?,?)', 
    [userEvent,userDate], (err,result) =>{
        if(err){
            console.log(err)
        } else{
            res.send("Data send to DB")
        }
    }
    );
  });

//Getting Specific  data from DB
app.get("/getData",(req, res) =>{
    db.query("SELECT * FROM calevent WHERE userDate = ?", [userDate], (err, result) => {
        if(err){
            console.log(err)
        }else{
            res.send(result)
        }
        console.log(result)
    });
});
 

Остальные вызовы не имеют состояния, что означает, что каждый запрос должен быть независимым от состояния. Если вы стремитесь к спокойному сервису, я бы посоветовал этого не делать. Хотя сохранение его в сеансе (экспресс-сеанс) или что-то подобное может сработать, но я бы посоветовал вам добавить userDate в вызов get, а также параметр (так как запрос GET не будет иметь тела). Вы уже отправляете неиспользуемый аргумент userDate getUserEvent функции, что-то похожее на это.

 Axios.get("http://localhost:3001/getData", { params: { userDate }} )