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

Question

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

但是，第一次点击时，由于文件还在，所以还是会打印出文件名。再次单击它，它会删除文件。不知道为什么会这样。

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

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

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: []
    })
}

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

this.setState is not clear out array on first attempt of onClick event and have to do it twice to clear out array

reactjs

react-redux

react-dropzone