react-dropzone中onDrop的files参数返回null，代码是否有误？

你的代码存在用法错误，导致onDrop中的files参数始终为null，核心问题是混用了react-dropzone新旧版本的API：

• 你使用的是react-dropzone v10+的组件模式（通过函数子组件获取getRootProps/getInputProps），但同时在<Dropzone>组件上绑定了旧版API的onDrop属性——新版组件已经不再支持通过props传递onDrop回调，这个配置不会被正确触发，进而导致参数异常。
• 另外，你的isLog方法存在潜在问题：如果文件内容为空，content[0]和content[content.length -1]会报错，需要先判断内容长度。

修复后的代码 #

import { Component } from 'react';
import Dropzone from 'react-dropzone';

import style from './LogUploader.css';

export class LogUploader extends Component {
    state = {
        message: t('logreader', 'Load log file')
    };

    isLog(content) {
        // 先判断内容非空，再校验格式
        return content.length > 0 && content[0] === '{' && content[content.length - 1] === '}';
    }

    onDropAccepted = (acceptedFiles) => {
        const file = acceptedFiles[0];
        const reader = new FileReader();
        reader.onload = (e) => {
            const content = e.target.result.trim();
            if (!this.isLog(content)) {
                this.setState({ message: t('logreader', 'Invalid log file') });
                return;
            }
            this.props.onLogFile(content);
        };
        reader.readAsText(file);
    };

    render() {
        const dropStyle = {
            display: 'inline-block',
            margin: '5px'
        };

        return (
            <Dropzone 
                multiple={false} 
                accept="text/*" 
                className="button" 
                style={dropStyle}
                onDropAccepted={this.onDropAccepted} // 使用新版API的回调
            >
                {({ getRootProps, getInputProps }) => (
                    <button {...getRootProps()}>{this.state.message}<input {...getInputProps()} /></button>
                )}
            </Dropzone>
        );
    }
}

关键修改点 #

• 替换旧版onDrop为新版react-dropzone支持的onDropAccepted回调，该回调会在文件符合accept规则时触发，参数为已接受的文件数组。
• 完善isLog方法的边界判断，避免空内容导致的报错。
• 移除了无效的onDrop props配置，遵循新版组件的API规范。

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