使用Supabase时React Query删除后UI无法即时更新怎么办？

一、用React Query内置机制处理（推荐，无需额外本地状态） #

既然你已经在用React Query的useEntrys获取数据，完全可以利用它的缓存管理能力直接同步UI，不用自己维护状态：

1. 失效查询缓存，触发自动重新获取 #

在EntryRow组件中，通过useQueryClient拿到客户端实例，删除成功后让对应查询的缓存失效，React Query会自动重新调用useEntrys的查询函数更新数据：

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

const EntryRow = ({ entry }) => {
  const queryClient = useQueryClient();

  const deleteEntry = async () => {
    // 执行Supabase删除逻辑
    const { error } = await supabase.from('entries').delete().eq('id', entry.id);
    if (!error) {
      // 这里的queryKey要和useEntrys里定义的完全一致
      queryClient.invalidateQueries({ queryKey: ['entries'] });
    }
  };

  return <button onClick={deleteEntry}>删除</button>;
};

注意：queryKey: ['entries']必须和useEntrys中useQuery配置的queryKey完全匹配，比如你的useEntrys如果是useQuery({ queryKey: ['entries'], queryFn: fetchAllEntries })，就用这个key。

2. 手动更新缓存（更高效，避免重新请求） #

如果不想重新请求全量数据，可以直接修改缓存中的数据，移除已删除的条目：

const deleteEntry = async () => {
  const { error } = await supabase.from('entries').delete().eq('id', entry.id);
  if (!error) {
    queryClient.setQueryData(['entries'], (oldEntries) => {
      return oldEntries.filter(item => item.id !== entry.id);
    });
  }
};

这种方式直接修改缓存，UI会立即更新，适合数据量较小的场景。

二、通过本地状态同步UI（备选方案） #

如果一定要用本地状态管理，需要把状态提升到EntryTable（EntryRow的父组件），通过props传递更新方法：

1. 父组件（EntryTable）维护状态并提供更新方法 #

import { useState, useEffect } from 'react';
import { useEntrys } from './useEntrys';
import EntryRow from './EntryRow';

const EntryTable = () => {
  const [entries, setEntries] = useState([]);
  const { data: fetchedEntries } = useEntrys();

  // 同步React Query的获取结果到本地状态
  useEffect(() => {
    if (fetchedEntries) setEntries(fetchedEntries);
  }, [fetchedEntries]);

  // 定义删除成功后的状态更新逻辑
  const handleDelete = (deletedId) => {
    setEntries(prev => prev.filter(item => item.id !== deletedId));
  };

  return (
    <table>
      <tbody>
        {entries.map(entry => (
          <EntryRow 
            key={entry.id} 
            entry={entry} 
            onDelete={handleDelete} 
          />
        ))}
      </tbody>
    </table>
  );
};

2. 子组件（EntryRow）调用父组件的更新方法 #

const EntryRow = ({ entry, onDelete }) => {
  const deleteEntry = async () => {
    const { error } = await supabase.from('entries').delete().eq('id', entry.id);
    if (!error) {
      // 通知父组件更新本地状态
      onDelete(entry.id);
    }
  };

  return (
    <tr>
      <td>{entry.title}</td>
      <td><button onClick={deleteEntry}>删除</button></td>
    </tr>
  );
};

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