javascript - React : TypeError: _this4 is undefined react
问题描述
大家好,我正在使用 Reactjs 构建一个应用程序并且卡住了。问题是我有一个函数getDocFinancialInfo(fileId)绑定到元素标签的 onClick 事件。每次我点击标签我都会得到TypeError: _this4 is undefined react。下面提供了代码
import React, { Component } from 'react';
import './UploadDocument.css'
import spinner from './spinner.gif'
import verified from './verified.png';
import notverified from './not-verified.png';
import Requirements from './Requirement.js'
class UploadDocument extends Component{
constructor(props) {
super(props);
this.state = {
application: [],
document:[],
id: null,
files: [],
docFinancialInfo: [],
uploaded: null
}
}
componentDidMount() {
this.setState({ id: sessionStorage.getItem('currentId') });
this.getApplicationInfo()
.then(application => this.setState({ application: application.application }))
.catch(err => console.log(err));
this.displayDocumentInfo();
this.displayDocumentsFinancialInfo();
}
reload = () => {
//RELOAD COMPONENT
this.componentDidMount();
};
displayDocumentsFinancialInfo = async() => {
await this.getDocumentsFinancialInfo(sessionStorage.getItem('currentId'))
.then(docFinancialInfo => this.setState({ docFinancialInfo: docFinancialInfo.docFinancialInfo }))
.catch(err => console.log(err));
//console.log("Doc Finance >> "+this.state.docFinancialInfo);
}
getDocumentsFinancialInfo = async(appId) => {
const response = await fetch('/getDocumentsFinancialInfo/'+appId);
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
}
displayDocumentInfo = async() => {
await this.getDocumentInfo(sessionStorage.getItem('currentId'))
.then(files => this.setState({ files: files.files }))
.catch(err => console.log(err));
//console.log("Files >> "+this.state.files);
}
getDocumentInfo = async(appId) => {
const response = await fetch('/getDocumentInfo/'+appId);
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
}
getApplicationInfo = async () => {
const appId = sessionStorage.getItem('currentId');
const response = await fetch('/getApplicationInfo/'+appId);
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
back(){
this.props.history.push("/");
}
submit = async() => {
var fileInput = document.getElementById('file-input');
if(fileInput.files.length === 0){
alert("Select at least one file to upload.");
}else{
this.spinner("show");
for (var i = 0; i < fileInput.files.length; i++) {
await this.uploadDocument(fileInput.files[i].name)
.then(document => {
this.setState({ document: document.document });
//console.log("DOCUMENT>>>>"+JSON.stringify(this.state.document));
if(this.state.document.hasOwnProperty('DocId')){
this.displayDocumentInfo();
this.reload();
this.setState({ uploaded: !this.state.uploaded });
}else if(this.state.document.hasOwnProperty('code')){
if(this.state.document["errno"] === "ETIMEDOUT"){
alert("ERROR: Could not connect to server. File '"+fileInput.files[i].name+"' could not be uploaded.");
}else if(this.state.document["errno"] === 1265){
var sqlMessage = this.state.document["sqlMessage"];
var column = sqlMessage.substring(sqlMessage.indexOf("'")+1, sqlMessage.lastIndexOf("'"));
alert("ERROR: File '"+fileInput.files[i].name+"' has error in value for field '"+column+"'.")
}else if(this.state.document["errno"] === 1048){
alert("ERROR: "+this.state.document["sqlMessage"]+" in the File '"+fileInput.files[i].name+"'");
}else if(this.state.document["errno"] === 503){
alert(this.state.document["sqlMessage"]);
}
}
})
.catch(err => {
console.log("ERROR>>>>"+err);
});
// console.log("NI Nmber>>>"+this.state.document["NI Number"]);
}
this.spinner("hide");
}
}
spinner(display){
if(display === 'show'){
document.getElementById("spinner").style.display = 'block';
document.getElementById("container").style.WebkitFilter = 'blur(1px)';
document.getElementById("spinner").style.zIndex = '2';
document.getElementById("pano").style.zIndex = '3';
document.getElementById("pano").style.position = 'fixed';
document.getElementById("pano").style.width = '100%';
document.getElementById("pano").style.height = '100%';
}else if(display === 'hide'){
document.getElementById("spinner").style.display = 'none';
document.getElementById("container").style.WebkitFilter = 'none';
document.getElementById("spinner").style.zIndex = '0';
document.getElementById("pano").style.zIndex = '0';
document.getElementById("pano").style.position = 'none';
document.getElementById("pano").style.width = '10%';
document.getElementById("pano").style.height = '10%';
}
}
uploadDocument = async (file) => {
const appId = sessionStorage.getItem('currentId');
const response = await fetch('/uploadDocument/'+appId+'/'+file);
const body = await response.json();
//console.log("body>>"+body.document);
if (response.status !== 200) throw Error(body.message);
return body;
}
closeRequirements(){
var req = document.getElementById('requirements');
req.style.display = "none";
}
getDocFinancialInfo(fileId){
sessionStorage.setItem('docId',fileId);
var req = document.getElementById('requirements');
req.style.display = "block";
}
render(){
const filesToRender = this.state.files.filter(files => files);
const filesLength = filesToRender.length;
var finData = this.state.docFinancialInfo;
var applicationInfo = this.state.application;
var employeeNameApplication;
var niNumberApplication;
var basicPayApplication;
var totalMonthlyPayApplication;
var payFromCurrentEmployerApplication;
for(var app in applicationInfo){
employeeNameApplication = applicationInfo[app][1] + " " + applicationInfo[app][2];
niNumberApplication = applicationInfo[app][4];
basicPayApplication = applicationInfo[app][5];
totalMonthlyPayApplication = applicationInfo[app][6];
payFromCurrentEmployerApplication = applicationInfo[app][7];
}
var employeeNameDoc;
var niNumberDoc;
var basicPayDoc;
var totalMonthlyPayDoc;
var payFromCurrentEmployerDoc;
var docId;
var notVerifedStatus = 0;
var docVerificationStatus = [];
finData.forEach(function (docFinInfo, index){
docId = docFinInfo[0];
var docName = docFinInfo[9];
var docType = docFinInfo[8];
employeeNameDoc = docFinInfo[3];
niNumberDoc = docFinInfo[4];
if(docType === "P60"){
console.log("Inside P60");
payFromCurrentEmployerDoc = docFinInfo[7];
if(employeeNameApplication !== employeeNameDoc){
notVerifedStatus++;
}
if(niNumberApplication !== niNumberDoc){
notVerifedStatus++;
}
if(payFromCurrentEmployerApplication > payFromCurrentEmployerDoc){
notVerifedStatus++;
}
}else{
console.log("Inside Payslip");
basicPayDoc = docFinInfo[8];
totalMonthlyPayDoc = docFinInfo[8];
if(employeeNameApplication !== employeeNameDoc){
notVerifedStatus++;
}
if(niNumberApplication !== niNumberDoc){
notVerifedStatus++;
}
if(basicPayApplication !== basicPayDoc){
notVerifedStatus++;
}
if(totalMonthlyPayApplication !== totalMonthlyPayDoc){
notVerifedStatus++;
}
}
if(notVerifedStatus > 0){
docVerificationStatus[index] = <td className="red"><img src={notverified} alt="Not Verified"/><label onClick={()=>this.getDocFinancialInfo(docId)}>Not Verified{docId}</label></td>;
}else{
docVerificationStatus[index] = <td className="green"><img src={verified} alt="Verified" /><label>Verified</label></td>;
}
});
var files;
if(filesLength > 0){
files = <div id="files_content">
<table className="file-uploaded">
<thead>
<tr>
<td>Document Name</td>
<td>Document Type</td>
<td>Status</td>
</tr>
</thead>
<tbody>
{
this.state.docFinancialInfo.map((doc,index) => (
<tr>
<td><label>{doc[9]}</label></td>
<td>{doc[8]}</td>
{docVerificationStatus[index]}
</tr>
))
}
</tbody>
</table>
</div>;
}else{
files = <div id="files_content">
<p><label className="no-content">No Files have been uploaded.</label></p>
</div>;
}
return(
<div>
<div id="spinner">
<img className="spinner-img" src={spinner} alt="Waiting"/>
</div>
<div id="pano"></div>
<div id="container">
{
this.state.application.map(app => (
<div id="application-info">
<h3>Mortagage Application for {app[1]} {app[2]}</h3>
</div>
)
)
}
<div className="files-heading">
<span onClick={()=>this.back()}>Cases</span>
<span className="heading">Tasks</span>
<span >Case Allocation</span>
<span >Other</span>
</div>
<div id="file-upload">
<div id="customer-information">
{
this.state.application.map(app => (
<div id="customer">
<p><label id="customer-name">{app[1]} {app[2]}</label></p>
<p><span>{app[8]}</span></p>
</div>
)
)
}
</div>
{
notVerifedStatus > 0 ? <div className="files-uploaded-heading">
<span>Info</span>
<span>Tasks</span>
<span className="heading">Requirements <span className="dot"><label>{notVerifedStatus}</label></span></span>
</div>
: <div className="files-uploaded-heading">
<span>Info</span>
<span>Tasks</span>
<span className="heading">Requirements</span>
</div>
}
<div id="file-container">
<div className="file-input">
<label>Please Upload 3 latest PaySlips & P60 : </label>
<input type="file" id="file-input" multiple/>
<p>
<button type="button" className="button" name="save" value="save" onClick={()=>this.submit()}>Save</button>
<button type="button" className="button" name="back" value="back" onClick={()=>this.back()}>Back</button>
</p>
</div>
<div id="files">
{files}
</div>
</div>
<div id="requirements">
<div id="requirements-content">
<span className="close" onClick={()=>this.closeRequirements()}>×</span>
<Requirements />
</div>
</div>
</div>
</div>
</div>
)
}
}
export default UploadDocument
我已经提供了完整的组件。我知道代码不够干净,但我仍在学习。谢谢您的帮助。:)
解决方案
我已从您的代码中删除了不相关的部分,并将其简化为这种情况:
finData.forEach(function (docFinInfo, index){
// ...
if(notVerifedStatus > 0){
docVerificationStatus[index] = <td className="red"><img src={notverified} alt="Not Verified"/><label onClick={()=>this.getDocFinancialInfo(docId)}>Not Verified{docId}</label></td>;
}else{
docVerificationStatus[index] = <td className="green"><img src={verified} alt="Verified" /><label>Verified</label></td>;
}
});
this
处理程序中的是onClick
指您作为参数传递给forEach
上述代码段第一行的方法的函数。您可以通过将“旧样式”函数转换为箭头函数来避免这种情况:
finData.forEach((docFinInfo, index) => {
// your code here.
});
现在this
将引用外部范围,在您的情况下为 class UploadDocument
。
推荐阅读
- powershell - 如何从批处理文件将参数传递给 PowerShell 脚本?
- c# - 读写MongoDB(C#驱动)时,如何判断哪些异常值得重试?
- python - 如何使用目标的输入文件对 SNMP python 请求循环进行多线程处理
- google-apps-script - 试图让谷歌电子表格自动滚动到底部填充的行。尝试了代码但出现错误
- laravel - Laravel 测试 API 端点 - 缺少 POST 参数
- python - 用两种方法计算的方差在 Python 中返回不同的结果
- laravel - 从数据库中获取选中的复选框 - laravel
- java - 正则表达式使用 replaceAll 替换文件路径
- python - 如何在字符串中包含变量名称(df 列标题)
- python - 如何在 SQLAlchemy 结果中访问具有相同名称的字段