使用react-dropzone无法显示rejectedFiles错误消息的解决请求

步骤1：处理文件拒绝错误并更新状态 #

先修正你代码里的语法问题（比如onDrop里多余的括号、div标签的语法错误），然后在onDrop回调中解析fileRejections数组，提取错误信息并更新errors状态：

import React, { useState } from "react";
import { useDropzone } from "react-dropzone";

const UploadFile = () => {
  const [errors, setErrors] = useState("");
  // 定义默认的提示文本
  const title = "拖拽文件到此处或点击选择";

  const { getRootProps, getInputProps } = useDropzone({
    multiple: false,
    // 可添加文件限制规则，示例：1MB大小限制、仅图片类型
    maxSize: 1024 * 1024,
    accept: {
      'image/*': ['.png', '.jpg', '.jpeg']
    },
    onDrop: (acceptedFiles, fileRejections) => {
      // 清空之前的错误
      setErrors("");
      
      if (fileRejections.length > 0) {
        // 提取每个被拒绝文件的错误信息
        const errorMessages = fileRejections.flatMap(rejection => 
          rejection.errors.map(error => `${rejection.file.name}: ${error.message}`)
        );
        // 拼接成易读的字符串格式
        setErrors(errorMessages.join("\n"));
      }
    }
  });

  return (
    <div {...getRootProps()} style={{ border: "1px dashed #ccc", padding: "20px", textAlign: "center" }}>
      <input {...getInputProps()} title={title} />
      <p>拖拽文件到此处或点击选择</p>
      {/* 渲染错误消息 */}
      {errors && (
        <p style={{ color: "red", padding: 5, margin: "10px 0 0", fontSize: 14, whiteSpace: "pre-line" }}>
          {errors}
        </p>
      )}
    </div>
  );
};

export default UploadFile;

关键说明 #

• fileRejections数组里的每个元素包含两个核心属性：
  • file: 被拒绝的文件对象，可获取文件名、大小等信息
  • errors: 该文件被拒绝的原因数组，每个error对象的message字段是现成的错误提示（比如"文件过大"、"不允许的文件类型"）
• 用flatMap+map组合提取所有错误信息，拼接成用户易读的格式
• 添加whiteSpace: "pre-line"样式，让换行符生效，每条错误单独一行显示

扩展优化 #

如果想更灵活渲染错误（比如每条错误单独用一个标签），可以把errors存为数组：

// 在onDrop中修改状态赋值
setErrors(fileRejections.flatMap(rejection => 
  rejection.errors.map(error => ({ fileName: rejection.file.name, message: error.message }))
));

// 渲染部分修改为
{errors.length > 0 && (
  <div style={{ color: "red", padding: 5, margin: "10px 0 0", fontSize: 14 }}>
    {errors.map((err, index) => (
      <p key={index}>{err.fileName}: {err.message}</p>
    ))}
  </div>
)}

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