Javascript React:TypeError:\u此4未定义React
大家好,我正在使用Reactjs构建一个应用程序,我被卡住了。问题是我有一个函数getDocFinancialInfo(fileId),它绑定到元素标签的onClick事件。每次单击标签时,我都会得到类型错误:_this4未定义。代码如下所示Javascript React:TypeError:\u此4未定义React,javascript,reactjs,Javascript,Reactjs,大家好,我正在使用Reactjs构建一个应用程序,我被卡住了。问题是我有一个函数getDocFinancialInfo(fileId),它绑定到元素标签的onClick事件。每次单击标签时,我都会得到类型错误:_this4未定义。代码如下所示 import React, { Component } from 'react'; import './UploadDocument.css' import spinner from './spinner.gif' impo
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
import React,{Component}来自'React';
导入“./UploadDocument.css”
从“./spinner.gif”导入微调器
从“/verified.png”导入已验证;
从“./not verified.png”导入notverified;
从“/Requirement.js”导入需求
类UploadDocument扩展组件{
建造师(道具){
超级(道具);
此.state={
应用程序:[],
文件:[],
id:null,
文件:[],
docFinancialInfo:[],
上传:空
}
}
componentDidMount(){
this.setState({id:sessionStorage.getItem('currentId')});
这个文件名为.getApplicationInfo()
.then(application=>this.setState({application:application.application}))
.catch(err=>console.log(err));
这个.displayDocumentInfo();
此.displayDocumentsFinancialInfo();
}
重新加载=()=>{
//重新加载组件
this.componentDidMount();
};
displayDocumentsFinancialInfo=async()=>{
等待此.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=wait fetch('/getDocumentsFinancialInfo/'+appId);
const body=wait response.json();
如果(response.status!==200)抛出错误(body.message);
返回体;
}
displayDocumentInfo=async()=>{
等待此.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=wait fetch('/getDocumentInfo/'+appId);
const body=wait response.json();
如果(response.status!==200)抛出错误(body.message);
返回体;
}
getApplicationInfo=async()=>{
const appId=sessionStorage.getItem('currentId');
const response=wait fetch('/getApplicationInfo/'+appId);
const body=wait response.json();
如果(response.status!==200)抛出错误(body.message);
返回体;
};
back(){
this.props.history.push(“/”);
}
提交=异步()=>{
var fileInput=document.getElementById('file-input');
if(fileInput.files.length==0){
警报(“选择至少一个要上载的文件”);
}否则{
这个旋转器(“show”);
对于(var i=0;i{
this.setState({document:document.document});
//log(“DOCUMENT>>>>”+JSON.stringify(this.state.DOCUMENT));
if(this.state.document.hasOwnProperty('DocId')){
这个.displayDocumentInfo();
这个。重载();
this.setState({upload:!this.state.upload});
}else if(this.state.document.hasOwnProperty('code')){
if(此.state.document[“errno”]=“ETIMEDOUT”){
警报(“错误:无法连接到服务器。文件“”+fileInput.files[i]。无法上载名称+”);
}else if(this.state.document[“errno”]==1265){
var sqlMessage=this.state.document[“sqlMessage”];
var column=sqlMessage.substring(sqlMessage.indexOf(“”)+1,sqlMessage.lastIndexOf(“”);
警报(“错误:文件“”+fileInput.files[i].name+“'字段“”+column+.”的值有错误)
}else if(this.state.document[“errno”]==1048){
警报(“错误:“+this.state.document[“sqlMessage”]+”在文件“+fileInput.files[i].name+”)中;
}else if(this.state.document[“errno”]==503){
警报(this.state.document[“sqlMessage”]);
}
}
})
.catch(错误=>{
log(“错误>>>”+错误);
});
//console.log(“NI-Nmber>>>”+this.state.document[“NI-Number”]);
}
这个旋转器(“隐藏”);
}
}
微调器(显示){
如果(显示=='show'){
document.getElementById(“微调器”).style.display='block';
document.getElementById(“容器”).style.WebkitFilter='blur(1px)';
document.getElementById(“微调器”).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(显示==='hide'){
document.getElementById(“微调器”).style.display='none';
document.getElementById(“容器”).style.WebkitFilter='none';
document.getElementById(“微调器”).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=a
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>;
}
});
finData.forEach((docFinInfo, index) => {
// your code here.
});