如何在渲染组件的循环中触发RTK useLazyQuery？

1. 无限重渲染触发：你在组件渲染的map循环里直接调用trigger(term)——React渲染阶段不允许执行会引发状态更新的操作，而trigger会更新result的状态，导致组件重新渲染，进而再次调用trigger，形成无限循环，最终抛出Too many re-renders错误。
2. 查询状态共享冲突：单个useLazyGetItemQuery返回的result被所有term复用，多个term的请求状态会互相覆盖，根本无法对应到每个term的独立数据和加载状态。
3. 异步状态未处理：直接访问data时没有考虑查询的异步特性——请求还在进行时data是不存在的，此时直接判断data && ...虽然不会报错，但会导致组件无法正确渲染加载状态，且可能出现逻辑上的空白期。

最合理的方式是为每个term单独维护查询状态，把单个term的查询和渲染逻辑抽成独立子组件，利用RTKQ的自动请求管理能力：

步骤1：封装TermItem子组件 #

import { useGetItemQuery } from './your-api-slice'

const TermItem = ({ term }) => {
  // 每个TermItem单独发起查询，RTKQ会自动缓存相同term的结果
  const { data, error, isLoading, isFetching } = useGetItemQuery(term)

  // 处理加载状态
  if (isLoading || isFetching) {
    return <div>加载中...</div>
  }

  // 处理错误状态
  if (error) {
    return <div>加载失败：{error.message}</div>
  }

  // 数据就绪后渲染目标组件
  return data ? <BComponent key={data.code} item={data} isLoading={false} /> : null
}

步骤2：在父组件中使用子组件 #

const YourComponent = () => {
  const terms = useSelector(({ terms }) => terms)

  return (
    <AComponent>
      {terms.map((term) => (
        // 用term自身的唯一标识作为key，避免React列表渲染警告
        <TermItem key={term.id /* 替换成term实际的唯一字段 */} term={term} />
      ))}
    </AComponent>
  )
}

可选：手动触发查询的场景 #

如果不需要一渲染就发起请求，而是需要手动触发（比如用户点击后），可以在子组件中结合useEffect使用useLazyGetItemQuery：

const TermItem = ({ term, shouldFetch }) => {
  const [trigger, result] = useLazyGetItemQuery()
  const { data, error, isLoading, isFetching } = result

  // 当shouldFetch或term变化时触发请求
  useEffect(() => {
    if (shouldFetch) {
      trigger(term)
    }
  }, [term, shouldFetch, trigger])

  // 状态处理逻辑同上
}

• RTKQ会自动缓存查询结果，相同term的重复请求会直接读取缓存，无需额外处理。
• 当其他组件向terms状态添加新term时，父组件会重新渲染，自动为新term创建TermItem并发起查询，完全符合你的预期效果。

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