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

问题描述

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


  1. 第一个屏幕:
    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 !");
    }
  });
});

  1. 第二个屏幕: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;

  1. 所有文件中的代码如下:
    一种。 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/

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


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

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...