在React 18中，当我将数据发送到Nodejs服务器时，它将发送两个请求并从服务器接收两个响应

Question

这是用于将访问令牌发送到服务器站点的前端代码。

useEffect(() => {
        const getProducts = async () => {
            try {
                const url = `http://localhost:5000/product?email=${user.email}`
                const { data } = await axios.get(url, {
                    headers: {
                        authorization: localStorage.getItem('accessToken')
                    }
                });
                setProducts(data);
            } catch (err) {
                const status = err.response.status;
                if (status === 401 || status === 403) {
                    signOut(auth);
                    navigate('/login');
                    localStorage.removeItem('accessToken')
                    toast.error(err.response?.data?.message);
                }
            }
        }
        getProducts();
    }, [user.email]);

这是服务器网站Express代码以进行响应。为什么每次收到两个请求并发送两个回复时？

app.get('/product', verifyToken, async (req, res) => {
            const decoded = req.decoded?.email;
            const queryEmail = req.query?.email;
            if (decoded === queryEmail) {
                const query = { email: queryEmail };
                const cursor = medicineCollection.find(query);
                const products = await cursor.toArray();
                res.send(products);
            } else {
                res.status(403).send({ message: "Forbidden Access" })
            }

        })

Answer 1

也许您将user.Email处于一种以某种方式更新的状态，因此使用效果再次调用并给您两次响应的原因。