TypeError：在reactjs中设置状态时未定义

Question

我正在尝试将文件从 reatjs 上传到 firebase 存储。而且我还想将 url 保存在实时数据库中。我已经上传了文件，现在我想获取文件名以保存在数据库中。但是在使用 setState 方法将文件名保存在变量中时，它告诉我这是未定义的

     handleSubmitFirebase(event) {

        alert(this.state.avatarURL);
        var docInfo = {
            title: this.docnm.value,
            path: this.state.avatarURL,
            document_type: this.doc_type.value,
            unm: this.unm.value,
            D_id: DbConfig.database()
                .ref("documents")
                .push(docInfo).key
        }; //documents info

        DbConfig.database()
            .ref("documents")
            .push(docInfo);
        this.docnm.value = ""; // <- clear the input
        alert("Successfully Added");
    }
     handlePdfUploadSuccess(filename) {

        alert(filename);

        this.setState({ avatar: filename, progress: 100, isUploading: false }); //error line
        DbConfig.storage().ref('upload/').child(filename).getDownloadURL().then(url => this.setState({ avatarURL: url }));
    }

 <form onSubmit={this.handleSubmitFirebase}>
                                    <div className="form-group label-floating is-empty">
                                        <label className="control-label">Document Name</label>
                                        <input type="text" className="form-control" ref={el => (this.docnm = el)} onChange={this.handleChange} />
                                        <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                        <label className="control-label">Document type</label>
                                        <div className="room-main">
                                            <div className="online-est">
                                                <select className="room-form" ref={el => (this.doc_type = el)}>
                                                    <option value="Circular">Circular</option>
                                                    <option value="User">User</option>
                                                </select>
                                            </div>
                                        </div>
                                        <span className="material-input"></span></div>
                                    <div className="form-group label-floating is-empty">
                                        <label className="control-label">User Name</label>
                                        <div className="room-main">
                                            <div className="online-est">
                                                <select className="room-form">
                                                    {this.renderUserInput()}
                                                </select>
                                            </div>
                                        </div>
                                        <span className="material-input"></span></div>

                                    <div className="form-group  label-floating is-empty">
                                        <label className="control-label">Document</label>
                                        <FileUploader
                                            accept="pdf,doc/*"
                                            name="avatar"
                                            randomizeFilename
                                            storageRef={DbConfig.storage().ref('upload/')}
                                            onUploadStart={this.handlePdfUploadStart}
                                            onUploadError={this.handlePdfUploadError}
                                            onUploadSuccess={this.handlePdfUploadSuccess}
                                        />
                                        <img src={this.state.avatarURL}/>                                    
                                        <span className="material-input"></span></div>
                                    <button type="submit" className="btn btn-fill btn-rose submit_btn">Submit</button>
                                </form>

Answer 1

原因是handlePdfUploadSuccess作为事件处理程序有自己的this上下文。您可以通过将handlePdfUploadSuccess 转换为箭头函数来获取组件的this 上下文，如下所示：

handlePdfUploadSuccess = filename => {

    alert(filename);

    this.setState({ avatar: filename, progress: 100, isUploading: false }); //error line
    DbConfig.storage().ref('upload/').child(filename).getDownloadURL().then(url => this.setState({ avatarURL: url }));
}

更新：

添加修改handleSubmitFirebase函数作为在数据库中保存新条目的示例：

handleSubmitFirebase(event) {
    alert(this.state.avatarURL);
    var newEntry = DbConfig.database().ref("documents").push()
    var docInfo = {
        title: this.docnm.value,
        path: this.state.avatarURL,
        document_type: this.doc_type.value,
        unm: this.unm.value,
        D_id: newEntry.key
    }; //documents info
    newEntry.set(docInfo);
    this.docnm.value = ""; // <- clear the input
    alert("Successfully Added");
}

Answer 2

您有多种方法可以修复此错误。问题在于上下文。 要么你做（在构造函数中）：

this.handlePdfUploadSuccess = this.handlePdfUploadSuccess.bind(this)

或者您将方法更改为箭头函数（将 this 绑定到自身）：

handlePdfUploadSuccess = filename => { // logic here }

或者，在 jsx 部分（内部渲染）：

onUploadSuccess={this.handlePdfUploadSuccess.bind(this)}

就性能和包大小而言，第一种方法是最好的。但它在代码可读性方面第二个是首选。另外，避免第三种方式:)。另外，从那里删除 //filename={file => this.docnm + file.name.split('.')[1] }，有时解析器不喜欢 jsx 组件中的那些 cmets。