如何在 MERN 应用程序中创建搜索表单

如何解决如何在 MERN 应用程序中创建搜索表单

由于某种原因，我的搜索表单不起作用。如果我在搜索中输入内容，它会再次返回所有产品。我需要一些帮助。

这是我的表格：

<form className="product--SearchForm" onSubmit={searchProduct}>
                            <input type="text" className="product--Search" name="search" placeholder="Search..."/>
                            <input type="submit" value="search"/>
                        </form>

这是我的要求：

const searchProduct = () => {
        fetch (`${API}/products`,{
            method: 'GET',})
        .then (response => response.json ())
        .then (response => {
            console.log(response)
            setProducts(response)
        })
        .catch (error => {
            console.error (error);
        });
    }

这是后端的控制器：

router.get('/',(req,res) => {
    productService.getAll(req.query).then(products =>{
        res.status(200).json(products)
    }).catch(() => res.status(500).end())
})

和服务：

async function getAll(query) {
    let products = await Product.find({}).lean()

    if (query.search) {
        products = products.filter(x => x.name.toLowerCase().includes(query.search))
    }

    return products;
}