React解密文件命名异常：生成undefined_decrypted.txt问题求助

核心问题1：参数传递顺序错位 #

你的createDecryptedFile函数定义的参数顺序是(decryptedContent, encryptedFileName)，但在onDrop里调用时只传了encryptedFileName，导致参数完全错位：

• 函数里的decryptedContent实际接收的是原文件名
• encryptedFileName接收的是undefined，所以生成的文件名会变成undefined_decrypted.txt
• 同时Blob里的内容是原文件名，不是真正的解密内容

核心问题2：调用时机错误 #

在onDrop阶段你还没有执行解密逻辑，此时调用createDecryptedFile没有实际的解密内容，应该在解密操作完成后再调用这个生成文件的函数。

修正后的代码示例 #

1. 调整onDrop逻辑，移除过早的createDecryptedFile调用

const onDrop = async (acceptedFiles) => {
  try {
    const droppedFile = acceptedFiles[0];
    const text = await droppedFile.text();
    setFile({ content: text, name: droppedFile.name });
    setFileDecrypted(false);
    setDecryptedContent(null);
    // 移除这里的createDecryptedFile调用，等待解密完成后再执行
  } catch (error) {
    console.error('文件读取失败:', error);
  }
};

2. 新增解密触发逻辑（比如按钮点击）

假设你有一个解密按钮，点击后执行解密并生成文件：

const handleDecrypt = () => {
  // 这里替换成你的实际解密逻辑
  const decryptedContent = yourDecryptionLogic(file.content);
  
  setDecryptedContent(decryptedContent);
  setFileDecrypted(true);
  
  // 解密完成后，正确传递两个参数：解密内容 + 原文件名
  createDecryptedFile(decryptedContent, file.name);
};

3. 优化createDecryptedFile（可选：处理原文件名后缀）

如果想避免原文件后缀重复（比如原文件是note.txt，不想要note.txt_decrypted.txt），可以先移除原后缀再拼接：

const createDecryptedFile = (decryptedContent, encryptedFileName) => {
  if (!decryptedContent || !encryptedFileName) return;

  // 移除原文件的后缀，再添加_decrypted.txt
  const baseFileName = encryptedFileName.replace(/\.[^/.]+$/, "");
  const decryptedFileName = `${baseFileName}_decrypted.txt`;

  const decryptedBlob = new Blob([decryptedContent], { type: 'text/plain' });
  const link = document.createElement('a');
  
  link.href = URL.createObjectURL(decryptedBlob);
  link.download = decryptedFileName;
  
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(link.href); // 释放URL对象，避免内存泄漏
};

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