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

来自React.js documentation：

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

Answer 2

如果您想在设置file后立即访问state，

您应该像以下一样使用它：

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

@quidproquo 解释了为什么在状态设置后没有立即访问它的原因。

将setState（）视为请求而不是立即命令更新组件。为了获得更好的感知性能，React可能会延迟它，然后一次更新几个组件。应对并不保证立即应用状态变化。

this.state.file在this.setState（{file}）之后仍未定义

2 个答案: