React.ts页面报Rendered more hooks错误，求排查与修复方案

问题场景 #

想要实现点击按钮获取新用户集并追加到现有列表，但页面加载时就触发了Rendered more hooks than during the previous render错误，代码如下：

import { useEffect, useState } from "react";
import { Server } from "../../server/auth";
import { useAppStore } from "../../zustand/store";
import UserCard from "./userCard";

export default function AdminPanel() {
  const [users, setUsers] = useState<Common.User[]>([]);
  const [offset, setOffset] = useState(0);
  const { authData, setAuthData } = useAppStore();
  const fetchUsers = async () => {
    const data = await Server.fetchUsers(offset, authData?.token);
    setUsers((state) => state.concat(data));
    setOffset(users.length);
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  return (
    <section className="ap-bg bgw">
      <div className="users d-grid">
        {users.map((user, index) => UserCard(user, `u-${index}`))}
      </div>
      <button onClick={() => fetchUsers()}>Fetch 10 more users</button>
    </section>
  );
}

错误原因 #

核心问题是组件调用方式违反了React Hooks规则：
你当前以普通函数调用的方式使用UserCard(user, u-${index})，如果UserCard内部包含React Hooks（如useState、useEffect），这种写法会让Hooks被包裹在map循环中执行。React要求Hooks必须在组件顶层按固定顺序调用，不能在循环、条件判断中执行——当users数组长度变化时，循环生成的函数调用次数改变，导致每次渲染时Hooks的执行数量不一致，从而触发该错误。

另外，fetchUsers中的setOffset(users.length)存在状态更新滞后问题：这里的users.length是更新前的状态值，可能导致offset计算错误。

修复方案 #

1. 修正组件调用方式 #

将UserCard的调用改为JSX元素形式，确保组件内部的Hooks在顶层按顺序执行，同时添加合法的key属性：

{users.map((user, index) => (
  <UserCard key={`u-${index}`} user={user} />
))}

（注：需确保UserCard组件接收user作为props，若原组件参数顺序不同，需调整props传递方式）

2. 优化offset更新逻辑 #

改用函数式更新获取最新状态，避免状态滞后问题：

setOffset(prevOffset => prevOffset + data.length);
// 或通过setUsers的回调获取新列表长度
setUsers(prevUsers => {
  const newUsers = [...prevUsers, ...data];
  setOffset(newUsers.length);
  return newUsers;
});

修复后的完整代码 #

import { useEffect, useState } from "react";
import { Server } from "../../server/auth";
import { useAppStore } from "../../zustand/store";
import UserCard from "./userCard";

export default function AdminPanel() {
  const [users, setUsers] = useState<Common.User[]>([]);
  const [offset, setOffset] = useState(0);
  const { authData } = useAppStore(); // 移除未使用的setAuthData

  const fetchUsers = async () => {
    if (!authData?.token) return; // 新增token校验，避免无效请求
    const data = await Server.fetchUsers(offset, authData.token);
    setUsers(prev => [...prev, ...data]);
    setOffset(prev => prev + data.length);
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <section className="ap-bg bgw">
      <div className="users d-grid">
        {users.map((user, index) => (
          <UserCard key={`u-${index}`} user={user} />
        ))}
      </div>
      <button onClick={fetchUsers}>Fetch 10 more users</button>
    </section>
  );
}

额外说明 #

• 始终确保React组件以JSX形式渲染，而非普通函数调用，尤其是组件内部包含Hooks时。
• 使用函数式更新（setState(prev => ...)）能避免依赖旧状态导致的逻辑错误。

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