React中在useMemo内调用Hook的合规解决方案咨询

架构老林

2026-6-18

解决React中useMemo内调用Hook的问题

首先明确：你之前的两种写法都违反了React Hook的规则——Hook只能在组件或自定义Hook的最顶层调用，不管是直接在useMemo回调里调用useSearchResult，还是封装成函数再调用，本质都是在非顶层的回调函数里执行Hook，这会导致React无法正确跟踪Hook的状态。

解决方案分两种情况：

情况1：`useSearchResult`内部没有使用其他Hook（如你当前提供的代码）

直接把useSearchResult改成普通函数组件，因为它只是接收props返回JSX，完全不需要以Hook的形式存在：

// 改成普通组件，去掉use前缀
const SearchResult = ({ item }) => {
  return (
    <div>
      {item.name}
      {item.id}
    </div>
  )
}

然后在父组件中直接映射渲染，若需要缓存列表的JSX，可以用useMemo（此时内部是渲染组件，不是调用Hook，符合规则）：

const renderedItems = useMemo(() => {
  return items.map(item => (
    <SearchResult key={item.id} item={item} />
  ))
}, [items]) // 依赖项是items，确保列表变化时才重新渲染

情况2：`useSearchResult`内部需要使用其他Hook（比如useState、useEffect等）

这种情况下，必须保证useSearchResult在组件顶层调用，因此需要为每个item创建独立的子组件，在子组件内部调用Hook：

// 子组件：负责单个item的逻辑，顶层调用Hook
const SearchResultItem = ({ item }) => {
  // 这里在组件顶层调用Hook，完全符合规则
  const element = useSearchResult({ item });
  return element;
}

// 父组件中映射渲染子组件
const renderedItems = useMemo(() => {
  return items.map(item => (
    <SearchResultItem key={item.id} item={item} />
  ))
}, [items])