循环中调用React Hook的规范替代方案是什么？

根据React Hook规则，禁止在循环、条件或嵌套函数中调用Hook——这会破坏Hook调用顺序的稳定性，导致状态管理逻辑混乱。针对你不想弃用现有useFetchUser Hook的需求，以下是两种规范的解决方式：

方案一：拆分子组件（推荐） #

将单个用户的获取逻辑封装到独立子组件中，每个子组件内部仅调用一次useFetchUser。这种方式既严格遵守Hook规则，又能完全复用现有Hook代码。

代码示例： #

import { useState, useEffect } from "react";

// 父组件：仅负责循环渲染子组件，不直接调用Hook
export default () => {
  const userIds = [1, 2, 3];

  return (
    <div>
      <h1>Users</h1>
      {userIds.map((userId) => (
        <UserItem key={userId} userId={userId} />
      ))}
    </div>
  );
};

// 子组件：独立调用Hook，符合规则
const UserItem = ({ userId }) => {
  const user = useFetchUser(userId);
  
  return (
    <div>
      {user.id} - {user.name}
    </div>
  );
};

// 保留原有的useFetchUser Hook
const useFetchUser = (id) => {
  const nameMap = {
    1: "Alice",
    2: "Bob",
    3: "Carol",
  };
  const [user, setUser] = useState({});

  useEffect(() => {
    setTimeout(() => {
      const name = nameMap[id];
      setUser({ id, name });
    }, 1000);
  }, [id]);

  return user;
};

核心逻辑：每个UserItem组件的渲染流程中，useFetchUser仅被调用一次，调用顺序完全固定，完美契合React Hook的规则，同时最大化复用了现有代码。

方案二：提取非Hook逻辑复用（适合不拆分子组件的场景） #

如果因业务限制无法拆分子组件，可以将useFetchUser中的核心数据获取逻辑提取为普通函数，再通过组件顶层的useState和useEffect批量管理状态，避免循环调用Hook。

代码示例： #

import { useState, useEffect } from "react";

export default () => {
  const userIds = [1, 2, 3];
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 批量执行原Hook中的数据获取逻辑
    const fetchUsers = async () => {
      const nameMap = { 1: "Alice", 2: "Bob", 3: "Carol" };
      const userPromises = userIds.map(id => 
        new Promise(resolve => {
          setTimeout(() => resolve({ id, name: nameMap[id] }), 1000);
        })
      );
      const fetchedUsers = await Promise.all(userPromises);
      setUsers(fetchedUsers);
    };

    fetchUsers();
  }, [userIds]);

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => (
        <div key={user.id}>
          {user.id} - {user.name}
        </div>
      ))}
    </div>
  );
};

注意：这种方式需要剥离原Hook中的非Hook逻辑，虽然能在单个组件中实现批量处理，但会失去useFetchUser的复用性，仅适合特殊场景。

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