Next.js表格按Location筛选失效，如何实现正确条件渲染？

核心问题分析 #

• Socket.io实时更新覆盖筛选结果：当前Socket连接的回调直接将全量数据赋值给streetLights状态，完全忽略当前筛选条件，导致筛选后的数据被实时推送的全量数据覆盖。
• 重复的Fetch逻辑：存在两个独立的useEffect负责数据获取，可能引发状态更新冲突。

具体修复步骤 #

1. 让Socket推送的数据应用筛选条件 #

修改Socket回调，更新状态前先根据当前filter过滤数据：

// Socket connection for real-time updates
useEffect(() => {
  const socket = io('http://localhost:3001');

  socket.on('streetLightsData', (data) => {
    // 应用当前筛选条件过滤推送的数据
    const filteredData = filter.location 
      ? data.filter(light => light.location === filter.location)
      : data;
    setStreetLights(filteredData);
  });

  return () => {
    socket.disconnect();
  };
}, [filter]); // 添加filter为依赖，确保筛选条件变化时更新监听逻辑

2. 合并重复的Fetch逻辑 #

删除第一个单次Fetch的useEffect，保留定时Fetch即可（已监听filter变化），避免重复请求导致状态混乱：

// 保留定时Fetch逻辑，移除之前的单次Fetch useEffect
useEffect(() => {
  const interval = setInterval(() => {
    const fetchStreetLights = async () => {
      const query = new URLSearchParams(filter).toString();
      const res = await fetch(`/api/streetlights?${query}`);
      const data = await res.json();
      setStreetLights(data);
    };

    fetchStreetLights();
  }, 100); // 建议将间隔改为3000ms以上，减少服务器压力

  return () => clearInterval(interval);
}, [filter]);

3. 验证API端点的筛选逻辑 #

确保/api/streetlights端点正确处理location查询参数，示例Next.js API路由代码：

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const location = searchParams.get('location');
  
  // 从数据库查询数据时添加筛选条件
  let streetLights = await db.streetlights.findMany();
  
  if (location) {
    streetLights = streetLights.filter(light => light.location === location);
  }
  
  return Response.json(streetLights);
}

额外优化建议 #

• 降低定时Fetch的频率（100ms过于频繁，推荐3-5秒间隔）。
• 移除未使用的selectedLocation状态，精简代码。

内容的提问来源于stack exchange，提问作者James Lee