文件过大报错时文本仍提交，setTimeout下Redux text状态无法清空

问题1：文件过大时文本仍被提交到数据库 #

核心解决思路：前置校验拦截，把文件大小检查放在所有提交逻辑的最前端，只要发现不符合要求的文件，直接终止后续流程，绝不执行数据库提交操作。

具体实现步骤：

• 遍历用户上传的所有文件，根据类型分别校验大小：
  • 视频文件（通过type.startsWith('video/')判断）：校验是否超过100 * 1024 * 1024字节（100MB）
  • 图片/文档：图片用type.startsWith('image/')判断，文档可根据后缀或MIME类型自定义判断，校验是否超过10 * 1024 * 1024字节（10MB）
• 一旦发现违规文件，弹出错误提示后直接return终止函数，不再执行任何提交代码。

代码示例（React表单场景）：

const handleSubmit = async (e) => {
  e.preventDefault();
  const { files, text } = formData; // 假设formData包含上传文件和文本内容

  // 第一步：文件大小校验
  let hasInvalidFile = false;
  for (const file of files) {
    if (file.type.startsWith('video/')) {
      if (file.size > 100 * 1024 * 1024) {
        alert('视频大小不能超过100MB');
        hasInvalidFile = true;
        break;
      }
    } else if (file.type.startsWith('image/') || isDocument(file)) { // 自定义isDocument判断文档类型
      if (file.size > 10 * 1024 * 1024) {
        alert('图片/文档大小不能超过10MB');
        hasInvalidFile = true;
        break;
      }
    }
  }

  // 校验不通过，直接终止流程
  if (hasInvalidFile) return;

  // 第二步：校验通过后，再执行数据库提交和状态更新
  try {
    await api.submitPost({ text, files }); // 调用提交接口
    dispatch(createPosts(text, 'text')); // 更新正常状态
    // 清空表单等后续操作
  } catch (err) {
    alert('提交失败，请重试');
  }
};

问题2：setTimeout中dispatch清空Redux状态无效 #

常见原因是异步任务的闭包捕获了旧的dispatch上下文，或是action/reducer逻辑存在问题，以下是三种可行解决方案：

方案1：用useRef保存最新的dispatch引用（React Hooks场景） #

避免闭包导致的dispatch失效问题，用ref始终持有最新的dispatch：

import { useDispatch } from 'react-redux';
import { useRef, useEffect } from 'react';

const PostForm = () => {
  const dispatch = useDispatch();
  const dispatchRef = useRef(dispatch);

  // 组件每次渲染时更新ref中的dispatch
  useEffect(() => {
    dispatchRef.current = dispatch;
  }, [dispatch]);

  const handleFileError = () => {
    alert('文件大小超出限制');
    setTimeout(() => {
      // 使用ref中保存的最新dispatch
      dispatchRef.current(createPosts('', 'text'));
    }, 1000);
  };
};

方案2：检查action creator和reducer的正确性 #

确认你的createPosts action creator和对应reducer是否正确处理空字符串：

// 正确的action creator示例
export const createPosts = (text, type) => {
  return {
    type: 'UPDATE_POST_TEXT', // 对应reducer中的action type
    payload: text,
  };
};

// 正确的reducer示例
const postReducer = (state = { text: '' }, action) => {
  switch (action.type) {
    case 'UPDATE_POST_TEXT':
      return { ...state, text: action.payload }; // 确保正确替换text值
    default:
      return state;
  }
};

方案3：移除不必要的setTimeout #

如果不是必须延迟清空状态，直接同步执行dispatch即可，这是最可靠的方式：

const handleFileError = () => {
  alert('文件大小超出限制');
  dispatch(createPosts('', 'text')); // 直接同步清空状态
};

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