变量被覆盖为空，找不到导致它的原因

Question

我正在尝试将从 url 分配的变量传递给 API，以便我可以从数据库获取信息。问题是该变量似乎被覆盖并设置为“”。我绞尽脑汁有一段时间了，似乎不知道如何解决它，任何帮助将不胜感激。

过滤器.tsx：

const [gender, setGender] = useState<string>(''); 
useEffect(() => {
        const path = window.location.pathname;
        const parts = path.split('/');
        const genderFromUrl = parts[parts.length - 1];
        const formattedGender = genderFromUrl.charAt(0).toUpperCase() + genderFromUrl.slice(1).toLowerCase();
        console.log("Formatted gender:", formattedGender);
        
        // Check if gender is empty and has not been set before
        if (!gender && formattedGender!== gender) { 
          console.log("Setting gender:", formattedGender);
          setGender(formattedGender);
        }
        
        if (gender) {
          getAllCategories();
        }
      }, [gender]); 
    
    const getAllCategories = async () => {
        try {
            console.log("Gender:", gender);
            const response = await axios.get(`/api/filter/get/categories?gender=${gender}`);
            
            return response.data;
        } catch (error) {
            console.error("Error", error);
            return null;
        }
    }

控制台输出为：

Formatted gender: Men
Filter.tsx:107 Setting gender: Men
Filter.tsx:118 Gender: 
Filter.tsx:103 Formatted gender: Men
Filter.tsx:107 Setting gender: Men
Filter.tsx:118 Gender: 
Filter.tsx:103 Formatted gender: Men
Filter.tsx:118 Gender: Men

我的API代码是：

import prisma from "@/app/prismadb"
import { NextResponse } from "next/server"



export async function GET(request: Request) {
    try {
      // Parse the query parameters from the request URL
      const url = new URL(request.url as string);
      console.log("Search parameters:", url.searchParams);
  
      // Extract the gender parameter and format it
      const genderParam = (url.searchParams.get("gender"));
      console.log("Gender read is:", genderParam);
  
      // Use the genderParam value to filter the products
      const allCategories = await prisma.product.findMany({
        where: {
          gender: genderParam || "Unisex"
        },
        select: {
          category: true
        }
      });
  
      console.log("Categories:", allCategories); // Log the categories to check if they are fetched correctly
  
      return NextResponse.json(allCategories);
    } catch (error) {
      console.log('Error', error);
      return NextResponse.error();
    }
  }
  
  

API 的控制台输出：

GET /filter/men 200 in 3384ms
 ✓ Compiled /api/filter/get/categories in 222ms (643 modules)
 ✓ Compiled (647 modules)
Search parameters: URLSearchParams { 'gender' => '' }
Gender read is: 
Search parameters: URLSearchParams { 'gender' => 'Men' }
Gender read is: Men
[next-auth][warn][NEXTAUTH_URL] 
https://next-auth.js.org/warnings#nextauth_url
[next-auth][warn][DEBUG_ENABLED] 
https://next-auth.js.org/warnings#debug_enabled
 GET /api/auth/session 200 in 406ms
 GET /api/auth/session 200 in 5ms
 GET /api/filter/get/sizes 200 in 594ms
 GET /api/filter/get/sizes 200 in 118ms
Categories: [
  { category: 'Sweatshirt' },
  { category: 'T-Shirt' },
  { category: 'Sweatshirt' }
]
 GET /api/filter/get/categories?gender= 200 in 1010ms
 GET /api/filter/get/colour 200 in 1019ms
Categories: [
  { category: 'Trouser' },
  { category: 'Trouser' },
  { category: 'Jacket' },
  { category: 'Jacket' },
  { category: 'Shirt' },
  { category: 'Shirt' },
  { category: 'Hoodie' }
]
 GET /api/filter/get/categories?gender=Men 200 in 1013ms
Search parameters: URLSearchParams { 'gender' => '' }
Gender read is: 
Categories: [
  { category: 'Sweatshirt' },
  { category: 'T-Shirt' },
  { category: 'Sweatshirt' }
]
 GET /api/filter/get/categories?gender= 200 in 130ms
 GET /api/filter/get/colour 200 in 129ms

它应该只显示一次，并且应该给出性别的类别，问题是当 localhost:3000/filter/men 是它实现其男人并给出相应类别的 url 时，但随后它会将其切换为男女通用，因为变量变为空

Answer 1

gender

根本不应该有状态，因为它是从 URL 读取的。

使用像SWR这样的数据获取钩子你会得到更好的时间：

import useSWR from "swr";
import axios from "axios";

function getGenderFromURL() {
  const path = window.location.pathname;
  const parts = path.split("/");
  const genderFromUrl = parts[parts.length - 1]!;
  return genderFromUrl.charAt(0).toUpperCase() + genderFromUrl.slice(1).toLowerCase();
}

function CategoryView() {
  const gender = getGenderFromURL();
  const url = `/api/filter/get/categories?gender=${gender}`;
  const categoriesSWR = useSWR(url, () => axios.get(url));
  if (!categoriesSWR.data) {
    return <div>Loading...</div>;
  }
  return <>{JSON.stringify(categoriesSWR.data)}</>;
}