内容过滤器问题

Question

请问为什么当我尝试搜索结果时所有内容都被过滤掉了

我检查了API和数据库，没有任何问题，所以这肯定是前端问题

   //initialize event page, lists out all the events
    const initEventData = async () => {
        try {
            const response = await fetch("http://localhost:3000/all-events", {
                method: "GET",
            });
            const data = await response.json();
            setEvents(data);
            setFilteredEvents(data);

           setFetched(true);
            // Calculate min and max prices from the events data
            let prices = [];
            data.map((event) => {
                let numericArray = event.price.split(",").map(Number);
                prices = prices.concat(numericArray);
            });
            console.log("prices: ", prices);
            const minPrice = Math.min(...prices);
            const maxPrice = Math.max(...prices);
            setTolPriceRange([minPrice, maxPrice]);
            setPriceRange([minPrice, maxPrice]);
        } catch (error) {
            console.error("Error fetching event data:", error);
        }
    };

    //switch to event mode (there is a venue mode)
    useEffect(() => {
        if (!fetched && isEvent) {
          initEventData();
        }
      }, [fetched,isEvent]); 
   
    //after filtering event page, show the filtered results, filtering is done in the backend
    const fetchEventData = async () => {
        try {
            const response = await fetch(
                "http://localhost:3000/navbar-events",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        name: searchQuery,
                        priceRange: priceRange,
                        earliestDate: dateRange.startDate,
                        latestDate: dateRange.endDate,
                    }),
                }
            );
            const data = await response.json();
            setEvents(data);
            setFilteredEvents(data);
        } catch (error) {
            console.error("Error fetching event data:", error);
        }
    };

    
    //sorting events
    useEffect(() => {
        if (fetched && isEvent) {
          const sortedEvents = [...filteredEvents].sort((a, b) => {
            let aValue, bValue;
    
            switch (category) {
              case 'earliestDate':
                aValue = new Date(a.earliestDate);
                bValue = new Date(b.earliestDate);
                break;
              case 'latestDate':
                aValue = new Date(a.latestDate);
                bValue = new Date(b.latestDate);
                break;
              case 'price':
                aValue = parseInt(Math.max(...a.price).eventnum, 10);
                bValue =  parseInt(Math.max(...b.price).eventnum, 10);
                break;
              case 'name':
              default:
                aValue = a.name.replace(/^\W+/, '');
                bValue = b.name.replace(/^\W+/, '');
                break;
            }
    
            if (ascending) {
              if (Number(aValue) && Number(bValue)) {
                return Number(aValue) - Number(bValue);
              } else {
                return a.name.localeCompare(b.name);
              }
            } else {
              if (Number(aValue) && Number(bValue)) {
                return Number(bValue) - Number(aValue);
              } else {
                return b.name.localeCompare(a.name);
              }
            }
          });
    
          setFilteredEvents(sortedEvents);
        }
      }, [category, ascending,fetched,isEvent]);

我不确定，正如我所说，有一个场地页面，但那里的排序效果很好。

（详细详细更多详细moooooooore详细）

Answer 1

1. 检查后端过滤：

   • 确保“http://localhost:3000/navbar-events”端点中实现的后端过滤正常工作。您可能希望在服务器端记录接收到的参数，以确保过滤按预期应用。

2. 检查获取请求：

   • 使用浏览器开发工具检查网络请求。检查发送到“http://localhost:3000/navbar-events”的请求，并确保参数（名称、价格范围、最早日期、最新日期）发送正确。

3. 正确处理错误：

   • 在异步函数的

     catch

     块中添加更详细的错误处理（特别是在

     fetchEventData

     中）。记录或显示错误消息以获取有关可能出现问题的更多信息。

4. 检查前端状态：

   • 在发出获取请求之前，请仔细检查状态变量（例如，

     searchQuery

     、

     priceRange

     、

     dateRange

     等）。确保这些值设置正确并代表所需的过滤器。

5. 用于调试的控制台日志：

   • 在代码中添加更多

     console.log

     语句，尤其是在异步函数中，以记录状态、从服务器接收的数据以及任何中间值。这可以帮助您确定问题可能发生在哪里。

6. 检查排序逻辑：

   • 检查事件排序的

     useEffect

     块中的排序逻辑（

     earliestDate

     、

     latestDate

     、

     price

     、

     name

     ）。确保排序标准和比较正确。

7. 验证后端和数据库：

   • 仔细检查后端和数据库，确保数据存在且结构正确。确认后端正在返回预期的数据来响应您的提取请求。

8. 检查CORS（跨源资源共享）：

   • 通过在服务器上配置 CORS 标头，确保您的前端可以向后端发出请求。检查浏览器控制台是否有任何与 CORS 相关的错误。

通过彻底调查这些方面，您应该能够识别并解决导致活动页面出现过滤问题的问题。