如何通过React Query在兄弟组件中展示带过滤的查询数据？

针对你的场景，有两种常用的解决方案来实现兄弟组件间的数据共享：

方案一：状态提升到共同父组件 #

把查询逻辑和状态（text、查询结果users）移到两个组件的共同父组件中，再通过props把需要的数据和方法传递给子组件，这是React中兄弟组件共享数据的标准方式。

父组件代码示例： #

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import UserSearch from './UserSearch';
import UserResults from './UserResults';

function HomePage() {
  const [text, setText] = useState('');

  const {
    data: users,
    isLoading,
    refetch,
  } = useQuery(['users', text], () => searchUsers(text), {
    enabled: false,
  });

  return (
    <div>
      <UserSearch 
        text={text} 
        setText={setText} 
        refetch={refetch} 
      />
      <UserResults 
        users={users} 
        isLoading={isLoading} 
      />
    </div>
  );
}

修改UserSearch组件： #

接收父组件传递的text、setText和refetch，移除内部的useState和useQuery：

function UserSearch({ text, setText, refetch }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    if (text === '') {
      alert('Please enter something');
      return;
    }
    refetch();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

修改UserResults组件： #

接收父组件传递的users和isLoading，直接渲染数据：

function UserResults({ users, isLoading }) {
  if (isLoading) return <div>加载中...</div>;
  if (!users) return <div>暂无数据</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

方案二：利用React Query的缓存共享 #

React Query的查询结果会基于查询键缓存，只要两个组件使用相同的查询键，就能共享同一份缓存数据。你可以在UserResults中复用查询键，同时确保它能拿到最新的text值。

步骤： #

1. 把text状态提升到父组件（或通过上下文共享），传递给两个子组件；
2. 在UserResults中使用相同的查询键发起查询：

UserResults组件代码示例： #

import { useQuery } from '@tanstack/react-query';

function UserResults({ text }) {
  const { data: users, isLoading } = useQuery(
    ['users', text], 
    () => searchUsers(text), 
    {
      // 只有当text不为空时才启用查询
      enabled: !!text,
    }
  );

  if (isLoading) return <div>加载中...</div>;
  if (!users) return <div>暂无数据</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

父组件只需传递text给UserResults： #

function HomePage() {
  const [text, setText] = useState('');

  return (
    <div>
      <UserSearch text={text} setText={setText} />
      <UserResults text={text} />
    </div>
  );
}

说明： #

当UserSearch中调用refetch更新缓存后，UserResults会自动接收到最新的缓存数据，无需额外处理。

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