TypeScript/React传递transferFilterValues.currency到搜索组件过滤货币表

你的判断是对的，React Query的查询完全依赖query key来识别不同的查询请求，只要把筛选参数加到key里，参数变化时会自动触发重新查询，同时会按不同的key缓存对应结果。
你现在的代码只需要修改useGetTransferRecord钩子的query key配置即可：

import { useQuery } from 'react-query'

import useUser from 'hooks/user'
//  apis
import { transactionAPI } from 'apis'
import { useSelectedAccount } from './account'

export function useGetTransferRecord(currency?: string) {
  const { user } = useUser()
  const { account } = useSelectedAccount()

  return useQuery(
    // 把所有影响查询结果的参数都放到query key里
    ['get-filtered-transfer', account?.uuid, currency],
    () => transactionAPI.getAllTransferByAccountUuid(account.uuid, currency),
    {
      // 只有当依赖项都存在时才触发查询，避免无效请求
      enabled: !!user && !!account && !!currency,
      // 可选配置：控制缓存的新鲜时间，有效期内切换回已查询过的货币不会重复发请求，单位是毫秒
      staleTime: 5 * 60 * 1000,
      // 可选配置：开启后切换筛选条件时会保留上一次的查询结果，避免表格出现空白加载态
      keepPreviousData: true
    }
  )
}

修改完成后，你选择货币下拉框时，transferFilterValues的currency会更新，传入useGetTransferRecord的参数变化会触发query key变化，React Query会自动拉取对应货币的转账记录，表格也会同步刷新。
后续如果需要新增status等其他筛选维度，只需要把对应参数也加入query key，同时传给接口即可，逻辑完全一致。
注：你提供的CurrenciesTable组件中使用了未定义的convertFilterValues变量，自行补充对应状态定义即可，不影响转账表格的筛选逻辑。

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