React组件map循环内用useQuery报错：Rendered more hooks than previous render

错误原因 #

React Hooks的核心规则是必须在组件顶层调用钩子，不能在循环、条件判断或嵌套函数中使用。你在map循环内调用useQuery，当getSomething数组的长度变化时，钩子的调用数量也会跟着改变，打破了"每次渲染钩子调用顺序一致"的要求，从而触发该错误。

解决方案 #

方案一：修改GraphQL查询，一次性获取关联数据

如果后端支持关联查询，直接在FETCH_SOMETHING_QUERY中嵌套获取用户信息，避免多次调用useQuery：

const FETCH_SOMETHING_QUERY = gql`
  {
    getSomething {
      id
      getUser { # 假设后端支持该关联字段查询
        name
        # 其他需要的用户字段
      }
    }
  }
`;

组件代码简化为：

export default function SomethingComponent() {
  const { data: { getSomething } = {} } = useQuery(FETCH_SOMETHING_QUERY);

  return (
    <>
      {getSomething?.map((something) => (
        <div key={something.id}>
          <h1>{something.getUser.name}</h1>
          {/* ... */}
        </div>
      ))}
    </>
  );
}

该方案最高效，能减少网络请求次数，优先推荐。

方案二：拆分循环项为独立子组件

把每个循环的something项抽离成子组件，在子组件顶层调用useQuery，符合Hooks规则：

// 子组件
function SomethingItem({ somethingId }) {
  const { data: { getUser } = {} } = useQuery(FETCH_USER_QUERY, {
    variables: { userId: somethingId },
  });

  return (
    <div>
      <h1>{getUser?.name}</h1>
      {/* ... */}
    </div>
  );
}

// 父组件
export default function SomethingComponent() {
  const { data: { getSomething } = {} } = useQuery(FETCH_SOMETHING_QUERY);

  return (
    <>
      {getSomething?.map((something) => (
        <SomethingItem key={something.id} somethingId={something.id} />
      ))}
    </>
  );
}

这种方式保持了代码逻辑的清晰性，同时遵守Hooks规则。

方案三：批量查询所有用户

如果后端支持批量查询，先提取所有需要的用户ID，再一次性获取所有用户数据：

export default function SomethingComponent() {
  const { data: { getSomething } = {} } = useQuery(FETCH_SOMETHING_QUERY);
  const userIds = getSomething?.map(item => item.id) || [];
  
  // 批量查询用户，需后端支持接收ID数组
  const { data: { getUsers } = {} } = useQuery(FETCH_USERS_QUERY, {
    variables: { userIds },
    skip: userIds.length === 0, // 无ID时跳过查询
  });

  // 将用户数据转为Map，方便快速查找
  const userMap = getUsers?.reduce((map, user) => {
    map[user.id] = user;
    return map;
  }, {}) || {};

  return (
    <>
      {getSomething?.map((something) => {
        const user = userMap[something.id];
        return (
          <div key={something.id}>
            <h1>{user?.name}</h1>
            {/* ... */}
          </div>
        );
      })}
    </>
  );
}

对应的批量查询GraphQL：

const FETCH_USERS_QUERY = gql`
  query ($userIds: [ID!]!) {
    getUsers(userIds: $userIds) {
      id
      name
      # 其他用户字段
    }
  }
`;

该方案适合需要批量获取数据的场景，能减少网络请求次数。

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