Question

处理组件的文档上载部分。用户可以删除他们要上传的文件，在删除区域下面是提交，取消按钮以及他们要提交的文件列表。取消按钮应清除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);

Answer 1

setState可以异步运行。

尝试将处理程序更改为：

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

您的控制台语句现在应该打印出您在第一次点击时所期望的内容。

Answer 2

尝试使用handleClick(event)方法设置状态，如下所示。

handleClick(event) {
    this.setState({
        ...this.state, files: []
    })
}

第一次尝试onClick事件时，this.setState不清除数组，必须两次清除数组

2 个答案: