React+TypeScript中用StorageProvider管理文件状态是否合理？如何更新？

你的这个方案完全合理，非常适配当前的文件/文件夹管理场景：

• 将API调用逻辑与全局状态集中在StorageProvider中，既避免了子组件重复编写请求代码，也统一了状态更新逻辑
• 通过React Context让下层组件直接获取数据与操作方法，无需逐层传递props，代码更简洁易维护
• 结合AbortSignal处理请求取消，能有效避免组件卸载后仍更新状态的问题，很适合标签页切换这类场景

以你代码中的createFolder为例，需要先调用API创建文件夹，再根据返回的新文件夹数据更新对应全局状态（比如myFolder）。由于文件夹是树形结构，更新时必须遵循React的不可变状态原则，不能直接修改原对象，要生成全新的树结构。

1. 实现createFolder方法 #

async function createFolder(signal: AbortSignal, parentFolderId?: string, folderName?: string): Promise<void> {
  try {
    // 调用API创建文件夹，假设返回新创建的文件夹数据
    const url = `${props.baseUrl}Api/Folder/Create`;
    const newFolder = await fetch(url, {
      method: 'POST',
      signal,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ parentFolderId, folderName })
    }).then(res => res.json() as JsonFolder);

    // 更新对应状态（此处以myFolder为例，实际场景也可能是sharedFolder）
    setMyFolder(prevFolder => {
      if (!prevFolder) return prevFolder;
      // 递归遍历文件夹树，找到父文件夹并添加新文件夹
      return updateFolderTree(prevFolder, parentFolderId, newFolder);
    });
  } catch (err) {
    if (err instanceof DOMException && err.name === 'AbortError') {
      // 请求被取消，无需额外处理
      return;
    }
    // 处理其他错误，比如提示用户
    console.error('创建文件夹失败:', err);
  }
}

2. 树形结构更新辅助函数 #

需要一个工具函数递归更新文件夹树，确保状态不可变：

// 辅助函数：在文件夹树中找到指定父节点，添加新文件夹
function updateFolderTree(
  currentFolder: JsonFolder,
  parentId: string | undefined,
  newFolder: JsonFolder
): JsonFolder {
  // 若为根目录（parentId为空），直接添加到根节点的children
  if (!parentId) {
    return {
      ...currentFolder,
      children: [...(currentFolder.children || []), newFolder]
    };
  }

  // 找到目标父文件夹，添加新子文件夹
  if (currentFolder.id === parentId) {
    return {
      ...currentFolder,
      children: [...(currentFolder.children || []), newFolder]
    };
  }

  // 递归处理子节点
  return {
    ...currentFolder,
    children: currentFolder.children?.map(child => 
      updateFolderTree(child, parentId, newFolder)
    ) || []
  };
}

3. 其他操作的状态更新示例（以重命名文件夹为例） #

类似逻辑可复用在renameFolder这类操作上：

async function renameFolder(signal: AbortSignal, folderId: string, newName: string): Promise<void> {
  const url = `${props.baseUrl}Api/Folder/Rename`;
  const updatedFolder = await fetch(url, {
    method: 'PUT',
    signal,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ folderId, newName })
  }).then(res => res.json() as JsonFolder);

  // 更新myFolder状态
  setMyFolder(prevFolder => {
    if (!prevFolder) return prevFolder;
    return renameFolderInTree(prevFolder, folderId, updatedFolder);
  });
}

// 重命名辅助函数
function renameFolderInTree(
  currentFolder: JsonFolder,
  targetId: string,
  updatedFolder: JsonFolder
): JsonFolder {
  if (currentFolder.id === targetId) {
    return updatedFolder;
  }
  return {
    ...currentFolder,
    children: currentFolder.children?.map(child => 
      renameFolderInTree(child, targetId, updatedFolder)
    ) || []
  };
}

4. 子组件中调用方法 #

子组件可通过useContext获取上下文，进而调用对应方法：

import { useContext } from 'react';
import { StorageContext } from './StorageProvider';

function CreateFolderButton() {
  const storageCtx = useContext(StorageContext);
  if (!storageCtx) throw new Error('组件必须包裹在StorageProvider内');

  const handleCreate = async () => {
    const controller = new AbortController();
    try {
      await storageCtx.createFolder(controller.signal, 'parent-folder-id', '新文件夹');
    } finally {
      controller.abort(); // 根据场景决定是否主动取消请求
    }
  };

  return <button onClick={handleCreate}>创建文件夹</button>;
}

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