React Context中deleteFile函数报错：无法读取undefined的'id'属性

报错原因 #

报错Cannot read properties of undefined (reading 'id')指向onDeleteFile函数里的file.id，说明**file变量是undefined**，同时还存在一个隐藏的参数顺序错误，会导致后续删除逻辑失效。

1. 直接报错点：file prop未正确传递 #

Folder组件的file参数在调用时可能没有被赋值，或者传递了undefined，导致点击删除按钮时访问file.id抛出错误。

2. 隐藏问题：函数参数顺序不匹配 #

你的deleteFile函数定义是：

const deletefile = (fileId, id) => { ... }

但调用时传的是：

deleteFile(id, file.id);

参数顺序完全相反，即使file存在，后续查找文件夹和过滤文件的逻辑也会出错。

解决步骤 #

第一步：修复file undefined问题 #

先确保访问file.id不会报错，可以通过两种方式处理：

方式1：新增存在性判断

const onDeleteFile = () => {
  // 先检查file是否存在，避免报错
  if (!file) return;
  deleteFile(id, file.id);
}

方式2：使用可选链操作符

const onDeleteFile = () => {
  // 可选链会在file为undefined时返回undefined，避免报错
  deleteFile(id, file?.id);
}

同时要检查Folder组件的调用处，确保file prop被正确传递（比如遍历文件列表时，每个文件项都要传入file参数）。

第二步：修正函数参数顺序 #

必须让调用参数和函数定义的参数顺序一致，二选一即可：

选项A：修改函数定义的参数顺序

把文件夹id放在前面，和调用逻辑匹配：

const deletefile = (folderId, fileId) => { // 重命名参数更清晰
  console.log('folderId:', folderId, 'fileId:', fileId);
  const copiedFolders = [...folders];
  for(let i = 0 ; i < copiedFolders.length; i++){
    if(copiedFolders[i].id === folderId){
      const files = [...copiedFolders[i].files];
      copiedFolders[i].files = files.filter((file) => file.id !== fileId);
      break;
    }
  }
  localStorage.setItem('data', JSON.stringify(copiedFolders));
  setFolders(copiedFolders);
}

选项B：修改调用时的参数顺序

按照函数定义的顺序传递参数：

const onDeleteFile = () => {
  if (!file) return;
  deleteFile(file.id, id); // 先传fileId，再传folderId
}

调试建议 #

在onDeleteFile里添加日志，确认参数值是否正确：

const onDeleteFile = () => {
  console.log('当前folder id:', id);
  console.log('当前file对象:', file);
  if (!file) {
    console.warn('file参数未定义');
    return;
  }
  deleteFile(id, file.id);
}

通过日志可以快速定位file未传递的原因。

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