使用 react 和 mern 进行搜索时出错
getting error doing a search with react and mern
我正在使用 mern 进行搜索,我在表单中输入一些内容,如果它存在或与后端中的相同,我们会显示它,否则,我们会显示找不到的短语,例如正常搜索
首先我创建了一个 post ,然后我输入了我正在寻找的另一种形式
但是当我尝试获取时出现错误,作为反应,有人可以帮助我吗,我很感激。谢谢
我收到这个错误
GET http://localhost:3000/post 401(未授权)
这个错误是我在后端设置的,如果我输入的东西在我的数据库中不存在,则显示找不到
以及如何键入存在的内容,如何在反应部分执行此参数?
import axios from "axios";
import { useState, useEffect} from "react";
function Post() {
const [post, setPost] = useState([])
const [click, setClick] = useState(false)
const [currentPost, setCurrentPost] = useState("")
useEffect (() => {
const allPost = async () => {
const res = await axios.get("/post");
if (setCurrentPost === post ) {
setPost(res.data);
} else {
setPost("not find")
}
}
allPost()
}, [])
return (
<div>
<form >
<label></label>
<input type="search" placeholder="Search"
onChange={(e)=> setCurrentPost(e.target.value)}/>
</form>
<button onClick={()=> setClick(true)}>search</button>
{click && post.map((post) => (
<h1>{post.post}</h1>
))}
</div>
)
}
export default Post;
这是我的后端
const router = require("express").Router();
const Post = require ("../models/Post");
router.post("/", async (req, res) => {
try {
const newPost = new Post({
post: req.body.post
});
const post = await newPost.save();
res.status(200).json(post);
} catch(err) {
res.status(500).json(err);
}
});
router.get("/" ,async (req,res ) => {
const findPost = await Post.findOne({post: req.body.post});
if(findPost) {
res.status(200).json(findPost);
} else {
res.status(401).json("not find")
};
})
module.exports = router;
和架构
onst mongoose = require("mongoose")
const PostSchema = new mongoose.Schema({
post: {
type: String,
required: true,
}
}, {timestamps: true});
module.exports = mongoose.model("Post", PostSchema)
假设您的目的是搜索帖子并在前端显示结果。
CLIENT_SIDE
import axios from "axios";
import { useState, useEffect} from "react";
function Post() {
const [post, setPost] = useState([])
const [click, setClick] = useState(false)
const [currentPost, setCurrentPost] = useState("")
useEffect (() => {
const allPost = async () => {
const res = await axios.get(`/post?post=${currentPost}`);
if (res && Array.isArray(res.data) ) {
setPost(res.data);
}
}
allPost()
}, [currentPost])
return (
<div>
<form >
<label></label>
<input type="search" placeholder="Search"
onChange={(e)=> setCurrentPost(e.target.value)}/>
</form>
<button onClick={()=> setClick(true)}>search</button>
{click && post.map((post) => (
<h1>{post.post}</h1>
))}
</div>
)
}
export default Post;
后端
router.get("/" ,async (req,res ) => {
const findPost = await Post.find({post: req.query.post});
if(findPost&&findPost.length) {
res.status(200).json(findPost);
} else {
res.status(200).json([]);// if not found,simply send empty array
};
})
如果您不熟悉 React 或节点的基础知识。请从他们的官方网站阅读他们的教程。
我正在使用 mern 进行搜索,我在表单中输入一些内容,如果它存在或与后端中的相同,我们会显示它,否则,我们会显示找不到的短语,例如正常搜索
首先我创建了一个 post ,然后我输入了我正在寻找的另一种形式
但是当我尝试获取时出现错误,作为反应,有人可以帮助我吗,我很感激。谢谢
我收到这个错误 GET http://localhost:3000/post 401(未授权)
这个错误是我在后端设置的,如果我输入的东西在我的数据库中不存在,则显示找不到
以及如何键入存在的内容,如何在反应部分执行此参数?
import axios from "axios";
import { useState, useEffect} from "react";
function Post() {
const [post, setPost] = useState([])
const [click, setClick] = useState(false)
const [currentPost, setCurrentPost] = useState("")
useEffect (() => {
const allPost = async () => {
const res = await axios.get("/post");
if (setCurrentPost === post ) {
setPost(res.data);
} else {
setPost("not find")
}
}
allPost()
}, [])
return (
<div>
<form >
<label></label>
<input type="search" placeholder="Search"
onChange={(e)=> setCurrentPost(e.target.value)}/>
</form>
<button onClick={()=> setClick(true)}>search</button>
{click && post.map((post) => (
<h1>{post.post}</h1>
))}
</div>
)
}
export default Post;
这是我的后端
const router = require("express").Router();
const Post = require ("../models/Post");
router.post("/", async (req, res) => {
try {
const newPost = new Post({
post: req.body.post
});
const post = await newPost.save();
res.status(200).json(post);
} catch(err) {
res.status(500).json(err);
}
});
router.get("/" ,async (req,res ) => {
const findPost = await Post.findOne({post: req.body.post});
if(findPost) {
res.status(200).json(findPost);
} else {
res.status(401).json("not find")
};
})
module.exports = router;
和架构
onst mongoose = require("mongoose")
const PostSchema = new mongoose.Schema({
post: {
type: String,
required: true,
}
}, {timestamps: true});
module.exports = mongoose.model("Post", PostSchema)
假设您的目的是搜索帖子并在前端显示结果。
CLIENT_SIDE
import axios from "axios";
import { useState, useEffect} from "react";
function Post() {
const [post, setPost] = useState([])
const [click, setClick] = useState(false)
const [currentPost, setCurrentPost] = useState("")
useEffect (() => {
const allPost = async () => {
const res = await axios.get(`/post?post=${currentPost}`);
if (res && Array.isArray(res.data) ) {
setPost(res.data);
}
}
allPost()
}, [currentPost])
return (
<div>
<form >
<label></label>
<input type="search" placeholder="Search"
onChange={(e)=> setCurrentPost(e.target.value)}/>
</form>
<button onClick={()=> setClick(true)}>search</button>
{click && post.map((post) => (
<h1>{post.post}</h1>
))}
</div>
)
}
export default Post;
后端
router.get("/" ,async (req,res ) => {
const findPost = await Post.find({post: req.query.post});
if(findPost&&findPost.length) {
res.status(200).json(findPost);
} else {
res.status(200).json([]);// if not found,simply send empty array
};
})
如果您不熟悉 React 或节点的基础知识。请从他们的官方网站阅读他们的教程。