this.setStateは、onClickイベントの最初の試行で配列がクリアされていないため、配列を消去するために2回行う必要があります。

Question

コンポーネントのドキュメントアップロードセクションで作業しています。ユーザーはアップロードするファイルをドロップすることができ、ドロップ領域の下には送信、キャンセルボタン、および提出するファイルのリストが表示されます。キャンセルボタンをクリックするとfilesアレイがクリアされます。

ただし、初めてクリックすると、まだファイルが存在するためファイル名が印刷されます。もう一度クリックすると、ファイルが消去されます。なぜこれが起こるかわからない。

問題の機能は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: [] 
    }) 
}