Redux Toolkit Query如何等用户输入参数后再触发查询Hook

RTK Query 原生提供了两种方式满足「参数就绪后再发起请求」的需求，不需要额外复杂封装。

方案1：使用skip配置项（适合参数就绪自动查询的场景） #

所有自动生成的useXxxQuery Hook都支持第二个配置参数，其中skip字段接收布尔值：

• 当skip为true时，Hook不会自动发起请求
• 当skip切换为false时，会自动使用当前传入的查询参数发起请求

注意：Hook必须始终在组件顶层调用，不能放在if条件块中，通过skip控制请求触发完全符合React Hook的调用规则。

针对用户输入宝可梦名称后查询的场景，修改后的可运行代码如下：

import * as React from 'react'
import { useState } from 'react'
import { useGetPokemonByNameQuery } from './services/pokemon'

export default function App() {
  // 存储用户输入的宝可梦名称，初始值为空
  const [pokemonName, setPokemonName] = useState('')

  // 名称为空时跳过请求，输入有效内容后自动触发查询
  const { data, error, isLoading } = useGetPokemonByNameQuery(pokemonName, {
    skip: !pokemonName,
  })

  return (
    <div className="App">
      <input
        type="text"
        value={pokemonName}
        onChange={(e) => setPokemonName(e.target.value.trim())}
        placeholder="请输入宝可梦名称"
      />

      {!pokemonName ? (
        <p>请输入宝可梦名称开始查询</p>
      ) : error ? (
        <>查询出错，请稍后重试</>
      ) : isLoading ? (
        <>加载中...</>
      ) : data ? (
        <>
          <h3>{data.species.name}</h3>
          <img src={data.sprites.front_shiny} alt={data.species.name} />
        </>
      ) : null}
    </div>
  )
}

方案2：使用懒查询Hook（适合完全手动触发的场景） #

如果你需要完全手动控制请求时机（比如用户点击查询按钮才发请求，而非输入完自动查），可以使用RTK Query自动生成的useLazyXxxQuery Hook，它会返回一个手动触发函数，你可以在任意业务时机调用这个函数传参发起请求：

import * as React from 'react'
import { useState } from 'react'
// 导入懒加载版本的查询Hook
import { useLazyGetPokemonByNameQuery } from './services/pokemon'

export default function App() {
  const [pokemonName, setPokemonName] = useState('')
  // 第一个返回值是手动触发查询的函数，其余返回值和普通查询Hook一致
  const [triggerQuery, { data, error, isLoading }] = useLazyGetPokemonByNameQuery()

  const handleSearch = () => {
    if (!pokemonName) return
    // 点击查询按钮时手动传参触发请求
    triggerQuery(pokemonName)
  }

  return (
    <div className="App">
      <input
        type="text"
        value={pokemonName}
        onChange={(e) => setPokemonName(e.target.value.trim())}
        placeholder="请输入宝可梦名称"
      />
      <button onClick={handleSearch}>查询</button>

      {error ? (
        <>查询出错，请稍后重试</>
      ) : isLoading ? (
        <>加载中...</>
      ) : data ? (
        <>
          <h3>{data.species.name}</h3>
          <img src={data.sprites.front_shiny} alt={data.species.name} />
        </>
      ) : null}
    </div>
  )
}

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