实时获取userData时出现无限循环问题求助

一、修复无限循环问题 #

你当前的无限循环是因为直接在组件顶层调用fetchuserData()，组件每次渲染都会执行这个函数，而setuserData又会触发组件重新渲染，形成死循环。解决方法是把初始数据请求放到useEffect中，仅在组件挂载时执行一次：

async function fetchUserData() {
  const res = await axios.get("http://localhost:3000/user-data?limit=4");
  setuserData(res.data);
}

// 仅组件挂载时请求初始数据
useEffect(() => {
  fetchUserData();
}, []);

二、优化实时同步逻辑 #

你的Socket连接逻辑已经正确，但需要区分数据库变更的类型（新增/更新用户），避免数据冗余或错误覆盖：

完整的Socket与数据更新逻辑： #

useEffect(() => {
  const socket = io("http://localhost:3000/");
  
  socket.on("connect", () => {
    console.log("Connected to server");
  });

  socket.on("message", (newData) => {
    console.log("Received message:", newData);
    setuserData(prevData => {
      // 检查是否已存在该用户（通过唯一id判断）
      const targetIndex = prevData.findIndex(item => item.id === newData.id);
      if (targetIndex !== -1) {
        // 存在则更新对应项
        const updatedList = [...prevData];
        updatedList[targetIndex] = newData;
        return updatedList;
      } else {
        // 不存在则追加新用户
        return [...prevData, newData];
      }
    });
  });

  return () => {
    socket.disconnect();
  };
}, []);

三、列表渲染优化 #

你的map渲染逻辑基本没问题，注意保持key使用唯一的type.id（避免用index作为key，防止列表增删时出现渲染异常）：

{userData.map((user, index) => (
  <h2
    className={`bg-${index % 2 === 0 ? "blue-100" : "white"} p-5 font-medium text-4xl text-center flex-1`}
    key={user.id}
  >
    {user.name}
  </h2>
))}

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