使用 react 和 mern 进行搜索时出错

Question

我正在使用 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)

Answer 1

假设您的目的是搜索帖子并在前端显示结果。

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 或节点的基础知识。请从他们的官方网站阅读他们的教程。

使用 react 和 mern 进行搜索时出错

getting error doing a search with react and mern

reactjs

search

react-hooks

axios

mern