this.setState 在第一次尝试 onClick 事件时不会清除数组，必须执行两次才能清除数组

处理组件的文档上传部分。用户可以拖放他们的文件进行上传，拖放区域下方是提交、取消按钮，以及他们将要提交的文件列表。取消按钮应该清除files数组。

但是，第一次单击时，由于文件仍在那里，它仍然会打印出文件名。再次单击它，它会删除文件。不知道为什么会发生这种情况。

有问题的函数是handleClick(event).

有趣的是，它会清除页面上所呈现的文件列表，但阵列仍显示为填充的视图console.log中handleClick(event)。

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { submitDocument } from '../../actions/documents';
import Dropzone from 'react-dropzone';

class SubmitDocuments extends Component {

    constructor() {
        super();
        this.state = {
            files: []
        }

        this.handleClick = this.handleClick.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.onDrop = this.onDrop.bind(this);
    }

    handleClick(event) {
        this.setState({
            files: []
        })
        console.log(this.state.files);

    }

    handleSubmit(event) {
        event.preventDefault();
        // console.log(this.state.files);
        // filesToBeSent.pus
    }

    onDrop(files) {
        // console.log(files);
        // files.push(this.state.files);
        this.setState({
            files
        });
    }

    render() {

        return (
            <form onSubmit={this.handleSubmit}>
                <div className='panel panel-default'>
                    <div className='panel-heading'>
                        <h4><strong>Submit Documents</strong></h4>
                    </div>

                    <div className='panel-body'>
                        <Dropzone className='dropzone' onDrop={this.onDrop}> 
                            <h3>Click to add files or drag files here to upload</h3>
                        </Dropzone>
                        <div>
                            {_.map(this.state.files, f =>
                                <h5 key={f.name}>{f.name} - {f.size} bytes</h5>
                            )}
                        </div>
                        <button type='submit' className='btn btn-primary'>Submit</button>
                        <button type='button' className='btn btn-danger' onClick={this.handleClick}>Cancel</button>
                    </div>
                </div>
            </form>
        ); 
    }
}

function mapStateToProps(state) {
    return {
        documents: state.home.documents
    }
}

export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);