为什么在使用MERN应用程序时无法立即更新屏幕？

如何解决为什么在使用MERN应用程序时无法立即更新屏幕？

我不太确定如何把我的问题说出来，所以首先我解释了我的工作。我正在构建一个项目，我的项目流程如下：

第一个屏幕：
a）用户输入他的名字，然后向后端服务器发出发布请求。
b）在后端，我掌握了该名称并将其分配给变量“用户名”，然后我在MongoDB数据库中搜索该“用户名”，如果不存在我通过名称创建一个文档：“用户名”，然后将其重定向到route（“ / notes”），或者如果他已经存在，则将其重定向到route（“ / notes”）。我的集合的架构如下：
const noteSchema = new mongoose.Schema（{ 名称：字符串，注意：[ { noteTitle：字符串， noteContent：字符串， }， ]， }）;
c）当我向后端服务器发出“发布”请求时，用于解释点“ a”（如上所述）的代码如下所示

import React,{ useState } from "react";
import Axios from "axios";

function EnterNameTemplate(props) {
  const [nameMe,setNameMe] = useState("");

  function handleChange(event) {
    const { value } = event.target;
    setNameMe(value);
  }

  function handleClick(event) {
    const nameObject = {
      name: nameMe,};
    Axios.post("/getName",nameObject)
      .then(() => {
        console.log("Inside axios.post in EnterName template");
        setNameMe("");
        props.getName();
      })
      .catch(() => {
        console.log("Error in axios.post in EnterName template");
      });
    event.preventDefault();
  }
  return (
    <form className="EnterNameTemplate">
      <label>Enter Your Name below</label>
      <input
        type="text"
        name="name"
        placeholder="Enter your name here"
        onChange={handleChange}
      />
      <button type="submit" onClick={handleClick}>
        Submit
      </button>
    </form>
  );
}

export default EnterNameTemplate;

d）下面显示了解释如何在后端处理该发布请求的代码

router.post("/getName",(req,res) => {
  userName = req.body.name;
  console.log(userName);
  Note.findOne({ name: userName },(err,foundUser) => {
    if (!foundUser) {
      const newUser = new Note({
        name: userName,notes: [
          {
            noteTitle: "This is your first note",noteContent: "This is your notes description part",},],});
      newUser.save();
      res.redirect("/notes");
    } else {
      res.redirect("/notes");
      console.log("name found and exists already !");
    }
  });
});

第二个屏幕：a）在第一个屏幕上，当用户输入自己的名字时，我使用React Hooks更新了屏幕，第1点c）代码中显示的props.getName（）函数使此功能正常工作。
b）我的App.jsx中的代码如下：

import React,{ useState,useEffect } from "react";
import Header from "./Header";
import CreateArea from "./CreateArea";
import Footer from "./Footer";
import Note from "./Note";
import EnterNameTemplate from "./EnterNameTemplate";
import axios from "axios";

function App() {
  const [finalNoteDB,setFinalNoteDB] = useState([]);
  const [isName,setName] = useState(false);
  function getNote() {
    axios
      .get("/notes")
      .then((response) => {
        // respond.data.notes this contains the notes array
        setFinalNoteDB(response.data.notes);
      })
      .catch((err) => {
        if (err) {
          console.log("error in app.jsx");
        }
      });
  }
  function getName() {
    setName(true);
  }
  useEffect(() => {
    let ignore = false;

    if (!ignore) getNote();
    return () => {
      ignore = true;
    };
  },[]);
  return (
    <React.Fragment>
      {isName ? (
        <div>
          <Header />
          <CreateArea getNote={getNote} />
          {finalNoteDB.map((singleNote,index) => {
            return (
              <Note
                key={index}
                id={singleNote._id}
                title={singleNote.noteTitle}
                content={singleNote.noteContent}
                getNote={getNote}
              />
            );
          })}

          <Footer />
        </div>
      ) : (
        <EnterNameTemplate getNote={getNote} getName={getName} />
      )}
    </React.Fragment>
  );
}

export default App;

c）其余的自定义标签如下：

import React,{ useState } from "react";
import AddIcon from "@material-ui/icons/Add";
import { Fab,Zoom } from "@material-ui/core";
import Axios from "axios";

function CreateArea(props) {
  const [note,setNote] = useState({
    noteTitle: "",noteContent: "",});
  const [zoom,setZoom] = useState(false);

  function handleChange(event) {
    const { name,value } = event.target;
    setNote((prevNote) => {
      return {
        ...prevNote,[name]: value,};
    });
  }
  function handleClick(event) {
    event.preventDefault();
    Axios({
      url: "/save",method: "POST",data: note,})
      .then(() => {
        console.log("Data sent successfully to mongoose");
      })
      .catch(() => {
        console.log("Error detected !");
      });
    setNote({
      noteTitle: "",});
    props.getNote();
  }
  function setZoomFunction() {
    setZoom(true);
  }

  return (
    <div>
      <form className="create-note">
        {zoom ? (
          <input
            name="noteTitle"
            placeholder="Title"
            onChange={handleChange}
            value={note.noteTitle}
          />
        ) : null}

        <textarea
          name="noteContent"
          placeholder="Take a note..."
          rows={zoom ? "3" : "1"}
          onChange={handleChange}
          value={note.noteContent}
          onClick={setZoomFunction}
        />
        <Zoom in={zoom}>
          <Fab onClick={handleClick}>
            <AddIcon />
          </Fab>
        </Zoom>
      </form>
    </div>
  );
}

export default CreateArea;

d）

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import Axios from "axios";

function Note(props) {
  function deleteNoteInNote() {
    const objectID = {
      id: props.id,};
    Axios.post("/delete",objectID);
    props.getNote();
  }
  return (
    <div className="note">
      <h1>{props.title}</h1>
      <p>{props.content}</p>
      <button onClick={deleteNoteInNote}>
        {" "}
        <DeleteIcon />{" "}
      </button>
    </div>
  );
}

export default Note;

所有文件中的代码如下：
一种。 server.js （用于处理后端）

const express = require("express");
const router = express.Router();
const Note = require("../models/Notes");
var userName = "";

router.get("/notes",function (req,res) {
  Note.findOne({ name: userName },data) => {
    if (!err) {
      res.send(data);
    } else {
      console.log("Error in get('/notes')");
    }
  });
});

router.post("/save",res) {
  const data = req.body;
  Note.findOne({ name: userName },foundUser) => {
    if (!err) {
      foundUser.notes.push(data);
      foundUser.save();
    }
  });
  res.json({
    msg: "success",});
});

router.post("/delete",res) {
  Note.findOneAndUpdate(
    { name: userName },{ $pull: { notes: { _id: req.body.id } } },foundUser) => {
      if (!err) {
        console.log("Succes in deleting");
        // res.redirect("/notes");
      } else {
        console.log(err);
      }
    }
  );
});

router.post("/getName",});
      newUser.save();
      res.redirect("/notes");
    } else {
      res.redirect("/notes");
      console.log("name found and exists already !");
    }
  });
});
module.exports = router;

b） App.jsx 中的代码在点2）b）中给出。
c） Notes.jsx，CreateArea.jsx 的代码分别在2）d），2）c）中显示。
d） EnterNameTemplate.jsx 的代码如下所示：

import React,nameObject)
      .then(() => {
        console.log("Inside axios.post in EnterName template");
        setNameMe("");
        props.getName();
      })
      .catch(() => {
        console.log("Error in axios.post in EnterName template");
      });
    event.preventDefault();
  }
  return (
    <form className="EnterNameTemplate">
      <label>Enter Your Name below</label>
      <input
        type="text"
        name="name"
        placeholder="Enter your name here"
        onChange={handleChange}
      />
      <button type="submit" onClick={handleClick}>
        Submit
      </button>
    </form>
  );
}

export default EnterNameTemplate;

e）显示我的目录结构的图片是： https://www.flickr.com/photos/189671520@N03/50214532896/in/dateposted/

a）问题是当我输入名称ex：“ test01”时，然后我成功获得了第二个屏幕，即“添加注释”屏幕，但是请问是否使用
noteTitle：“第一天”
noteContent：“洗个澡”
。 b）成功添加注释后，当我刷新页面并假设这次输入名称“ test02”时。然后，而不是显示新的空白便笺，而是显示包含名为“ test01”的人的便笺（即上一个用户的便笺）。
c）然后，当我添加新便笺时，说
noteTitle ：“第2天”
noteContent：“小睡”
。然后，我立即获得当前用户的文档（即，名为name =“ test02”的notes数组）。
d）同样，如果我刷新页面，然后使用name =“ test03”，则首先得到包含前人注释的显示（在这种情况下为“ test02”），并且如果我添加新注释或说刷新页面并登录再次使用名称“ test02”，然后才获得当前用户的notes数组（在这种情况下为“ test03”）

那么如何克服呢？我到底有什么错误，还是由于猫鼬反应问题引起的？

为什么在使用MERN应用程序时无法立即更新屏幕？

如何解决为什么在使用MERN应用程序时无法立即更新屏幕？

e）显示我的目录结构的图片是： https://www.flickr.com/photos/189671520@N03/50214532896/in/dateposted/

相关推荐