React Suspense初始渲染后如何实现数据更新与重渲染？

你当前的核心问题是resource = fetchData()定义在组件外部，只会执行一次，删除操作后无法重新发起请求、触发组件重渲染。以下是具体解决方案：

1. 用组件状态管理资源 #

将资源的创建纳入useState管理，更新状态时组件会重渲染，重新执行fetchData()获取最新数据：

import { Suspense, useState } from 'react';
const ChildComponent = React.lazy(() => import('./childComponent'));

// 主组件
function ParentComponent() {
  const [resource, setResource] = useState(() => fetchData());

  const handleDeleteItem = async (id) => {
    // 执行删除API请求
    await deleteItemApi(id);
    // 更新resource，触发重渲染并重新拉取数据
    setResource(fetchData());
  };

  return (
    <Suspense fallback={<div>加载中...</div>}>
      <ChildComponent resource={resource} onDelete={handleDeleteItem} />
      <ChildComponent resource={resource} onDelete={handleDeleteItem} />
    </Suspense>
  );
}

// 子组件
function ChildComponent({ resource, onDelete }) {
  const data = resource.getItem.read();

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          {item.name}
          <button onClick={() => onDelete(item.id)}>删除</button>
        </div>
      ))}
    </div>
  );
}

2. 结合useEffect做精细控制 #

如果需要根据特定参数触发请求，可配合useEffect和状态标识实现：

function ParentComponent() {
  const [resource, setResource] = useState(null);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  // 每当refreshTrigger变化，重新获取资源
  useEffect(() => {
    setResource(fetchData());
  }, [refreshTrigger]);

  const handleDeleteItem = async (id) => {
    await deleteItemApi(id);
    // 通过修改标识触发useEffect重新执行
    setRefreshTrigger(prev => prev + 1);
  };

  if (!resource) return <div>初始化加载中...</div>;

  return (
    <Suspense fallback={<div>加载中...</div>}>
      <ChildComponent resource={resource} onDelete={handleDeleteItem} />
    </Suspense>
  );
}

关键注意点 #

• 不要在组件外部定义fetchData()，否则无法响应组件状态变化。
• 必须等待删除API请求完成后再更新资源，避免数据不一致。
• 核心逻辑是通过组件状态更新触发重渲染，从而生成新的resource供子组件读取。

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