this.state.file仍未定义this.set状态（{file}）[重复]

Question

我有一个奇怪的问题，我想不出来。

我有一个按钮，我点击，一个文件窗口会出现

当用户选择一个文件并单击确定时，我有this.setState（{file}）来记录用户选择的文件。但它不起作用。

<div id="file-upload-submit-btn-container">
     <Button id="choose-file-btn" 
           onClick={this.buttonClick.bind(this)}>
            Choose file
     </Button>
     <input type="file" id="upload-input" 
            onChange={this.handleInputSelect.bind(this)} 
            onClick={(e) => e.target.value = null}  // reset input file
            multiple={false}/>
</div>

javascript

constructor() {
    super()
    this.state ={
        url: "https://example.com:8303",
    }
}


getFileUploader() {
    return $(this.refs.dropzone).find("#upload-input") 
}

buttonClick(e) {
    e.preventDefault()
    let $fileuploader = this.getFileUploader()
    $fileuploader.trigger('click');
}

handleInputSelect(e) {
    e.preventDefault()
    let file = e.target.files[0]
    this.setState({file})      <---- setState at here, but it is not getting recorded
    console.log(file, this.state.file)  <---file IS defined here but not this.state.file, why?

    this.handleUpload()
}

Answer 1

如果您想在设置state之后访问文件，

你应该像这样使用它：

this.setState({file} , () => {
    console.log(file, this.state.file)
});

“quidproquo”解释了为什么在设置状态后不立即访问它。

将setState（）视为更新组件的请求，而不是即时命令。为了更好地感知性能，React可能会延迟它，然后在一次过程中更新多个组件。React不保证立即应用状态更改。

Answer 2

从React.js文档：

将setState（）视为更新组件的请求，而不是立即命令。为了更好地感知性能，React可能会延迟它，然后在一次传递中更新几个组件。React不能保证立即应用状态更改。