Semi-Design Upload组件在严格模式下的上传问题分析与解决方案

问题背景

在Semi-Design UI库的2.64.0版本中，用户报告了一个关于Upload组件上传功能的异常行为。当应用处于React严格模式(Strict Mode)下时，Upload组件会出现两种异常情况：

1. 对于较大文件(约100KB以上)，上传直接失败并报错
2. 对于较小文件(约1KB左右)，虽然服务器返回200响应，但进度条会一直显示，无法完成上传

问题分析

经过深入调查，发现问题与React的严格模式特性密切相关。在严格模式下，React会故意进行以下操作来帮助开发者发现潜在问题：

• 组件会经历两次挂载(mount)和卸载(unmount)过程
• 副作用会被执行两次

对于Upload组件来说，这种双重渲染导致了上传请求被意外中止(abort)。具体表现为：

1. 第一次渲染时，上传请求正常发起
2. 第二次渲染时，由于组件"卸载"，触发了请求的中止逻辑
3. 最终导致上传过程被中断

技术原理

React严格模式是React提供的一种开发环境下的辅助工具，它通过模拟生产环境中可能出现的极端情况，帮助开发者提前发现潜在问题。在严格模式下：

• 组件的生命周期会被故意执行两次
• 副作用会被重复触发
• 过时的API会被警告

这种设计理念是为了帮助开发者编写更健壮的代码，确保组件能够正确处理各种边界情况。

解决方案

针对这个问题，开发者有以下几种解决方案：

1. 禁用严格模式

最简单的解决方案是移除应用的严格模式包装。在项目入口文件中，删除<React.StrictMode>标签即可：

// 修改前
<React.StrictMode>
  <App />
</React.StrictMode>

// 修改后
<App />

但这种方法并不推荐，因为它会失去严格模式带来的开发阶段错误检测能力。

2. 升级Semi-Design版本

根据用户反馈，回退到v2.63.1版本可以解决问题。这表明该问题可能是2.64.0版本引入的回归问题。建议关注Semi-Design的后续版本更新，等待官方修复。

3. 自定义上传逻辑

对于需要立即解决的场景，可以考虑实现自定义上传逻辑，通过更精细的控制来避免严格模式的影响：

const customRequest = ({ file, onProgress, onSuccess, onError }) => {
  const controller = new AbortController();
  
  // 上传逻辑实现
  const upload = async () => {
    try {
      const formData = new FormData();
      formData.append('file', file);
      
      const response = await axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          const percent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          onProgress({ percent });
        },
        signal: controller.signal
      });
      
      onSuccess(response.data);
    } catch (error) {
      onError(error);
    }
  };

  upload();
  
  return {
    abort() {
      controller.abort();
    }
  };
};

// 在Upload组件中使用
<Upload customRequest={customRequest} />

最佳实践建议

1. 开发阶段保持严格模式：尽管它可能暂时导致某些组件行为异常，但能帮助发现潜在问题
2. 组件设计考虑严格模式：开发自定义组件时，应该确保它们能在严格模式下正常工作
3. 及时更新依赖：关注UI库的更新日志，及时应用修复版本
4. 错误处理：为上传功能添加完善的错误处理和重试机制

总结

Semi-Design Upload组件在严格模式下的上传问题，本质上反映了组件设计与React严格模式的兼容性问题。通过理解React严格模式的工作原理，开发者可以更好地处理这类问题，并采取适当的解决方案。建议开发者在遇到类似问题时，优先考虑保持严格模式，并通过其他方式解决问题，以确保应用的整体质量。