React Hook报错：useSubscribe不可在回调中调用，求解决办法

错误核心原因 #

React Hook规则明确要求：所有Hook必须在组件顶层作用域调用，不能嵌套在useMemo、map这类回调函数、循环或条件判断里。你当前代码在useMemo回调内嵌套两层map，并在最内层调用useSubscribe和useFind，完全违反了Hook调用规则。

修改方案 #

方案1：拆分独立组件（最推荐） #

把每个todo对应的逻辑抽成单独组件，让Hook在组件顶层调用，完全符合规则：

// 单独的TodoItem组件
const TodoItem = ({ todoId }) => {
  const commentLoading = useSubscribe('card', todoId);
  const todos = useFind(
    () =>
      Todos.find(
        { todo._id: todoId },
        { sort: { createdAt: 1 } }
      ),
    [todoId, commentLoading()]
  );

  return (
    <>
      {todos.map((todo) => (
        <Todo key={todo._id} {...todo} />
      ))}
    </>
  );
};

// 原组件中使用
const TodosList = useMemo(() => {
  return lists?.map((list) => (
    <div key={list._id}>
      {list?.todos?.map((todo) => (
        <TodoItem key={todo._id} todoId={todo._id} />
      ))}
    </div>
  ));
}, [lists]);

方案2：自定义Hook封装逻辑（适合复用场景） #

如果多处需要类似的todo数据获取逻辑，可封装成自定义Hook，在组件顶层调用后再处理渲染：

// 自定义Hook
const useTodoData = (todoIds) => {
  return useMemo(() => {
    const todoMap = {};
    todoIds.forEach(todoId => {
      const commentLoading = useSubscribe('card', todoId);
      const todos = useFind(
        () =>
          Todos.find(
            { todo._id: todoId },
            { sort: { createdAt: 1 } }
          ),
        [todoId, commentLoading()]
      );
      todoMap[todoId] = todos;
    });
    return todoMap;
  }, [todoIds]);
};

// 原组件中使用
const App = () => {
  // 收集所有todoId
  const allTodoIds = useMemo(() => {
    return lists?.flatMap(list => list?.todos?.map(todo => todo._id)) || [];
  }, [lists]);

  // 组件顶层调用自定义Hook
  const todoDataMap = useTodoData(allTodoIds);

  // 渲染列表
  const TodosList = useMemo(() => {
    return lists?.map((list) => (
      <div key={list._id}>
        {list?.todos?.map((todo) => (
          <div key={todo._id}>
            {todoDataMap[todo._id]?.map((todoItem) => (
              <Todo key={todoItem._id} {...todoItem} />
            ))}
          </div>
        ))}
      </div>
    ));
  }, [lists, todoDataMap]);

  return <div>{TodosList}</div>;
};

注意：如果useSubscribe不支持单Hook多ID订阅，此方案需调整，优先选择方案1更稳妥。

方案3：提前批量获取数据（减少Hook调用） #

若数据层支持批量查询/订阅，可在组件顶层一次性获取所有需要的数据，避免循环调用Hook：

const App = () => {
  // 收集所有todoId
  const allTodoIds = useMemo(() => {
    return lists?.flatMap(list => list?.todos?.map(todo => todo._id)) || [];
  }, [lists]);

  // 批量订阅所有todo（假设useSubscribe支持批量ID）
  const commentLoading = useSubscribe('card', allTodoIds);

  // 批量查询所有todos（假设支持$in查询）
  const allTodos = useFind(
    () =>
      Todos.find(
        { todo._id: { $in: allTodoIds } },
        { sort: { createdAt: 1 } }
      ),
    [allTodoIds, commentLoading()]
  );

  // 将todos按todo._id分组
  const todosByTodoId = useMemo(() => {
    return allTodos.reduce((acc, todo) => {
      acc[todo.todo._id] = [...(acc[todo.todo._id] || []), todo];
      return acc;
    }, {});
  }, [allTodos]);

  // 渲染列表
  const TodosList = useMemo(() => {
    return lists?.map((list) => (
      <div key={list._id}>
        {list?.todos?.map((todo) => (
          <div key={todo._id}>
            {todosByTodoId[todo._id]?.map((todoItem) => (
              <Todo key={todoItem._id} {...todoItem} />
            ))}
          </div>
        ))}
      </div>
    ));
  }, [lists, todosByTodoId]);

  return <div>{TodosList}</div>;
};

此方案依赖数据层的批量支持，能减少Hook调用次数，同时符合规则。

总结 #

最稳妥且符合React设计理念的是方案1：拆分独立组件，它不仅解决了Hook调用问题，还让代码结构更清晰、职责更单一，便于维护和测试。

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