问题描述
我不太确定如何把我的问题说出来,所以首先我解释了我的工作。 我正在构建一个项目,我的项目流程如下:
- 第一个屏幕:
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”)
- 那么如何克服呢?我到底有什么错误,还是由于猫鼬反应问题引起的?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)