大家好，我正在使用Reactjs构建应用程序并被卡住。问题是我有一个功能 getDocFinancialInfo（fileId），该功能绑定到元素 label 的onClick事件。每次单击标签时，都会出现 TypeError：_this4未定义的反应。下面提供了代码
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
我提供了完整的组件。我知道代码虽然不尽如人意，但我仍在学习。谢谢您的帮助。 ：）
答案 0 :(得分：1)
我已从您的代码中删除了不相关的部分，并将其减少为这种情况：
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import sklearn
from glob import glob
import os
import itertools
import tensorflow as tf
print(os.listdir("A_DeviceMotion_data"))
Activety_Types = {'dws_1':1,'jog_9':2,'sit_5':3,'std_6':4,'ups_3':5,'wlk_7':6, 'dws_2':7, 'dws_11':8, 'jog_16':9, 'sit_13':10, 'std_14':11, 'ups_4':12, 'ups_12':13,'wlk_8':14,'wlk_15':15}
listDict = list(Activety_Types.keys())
Folders = glob('C:/Users/TechProBox/Desktop/A_DeviceMotion_data/*_*')
Folders = [s for s in Folders if "csv" not in s]
Df_all_list = []
Exp = 0
Segment_Size = 400
for j in Folders:
print("Folder {}\n".format(j))
Csv = glob(j + '/*' )
for i in Csv:
print (i)
print (j)
print("HERE")
df = pd.read_csv(i)
print(Activety_Types[j[48:56]])
df['Activity'] = Activety_Types[j[48:56]]
print("HERE1")
df['Sub_Num'] = i[len(j)+5:-4]
df['Exp_num'] = 1
ExpNum = np.zeros((df.shape[0]))
for i in range(0,df.shape[0]-Segment_Size,Segment_Size):
ExpNum[range(i,i+Segment_Size)] = i/Segment_Size +Exp*100
df['Exp_num'] = ExpNum
Df_all_list.append(df)
Exp += 1
Df_all = pd.concat(Df_all_list,axis=0)
Df_all.head()
plt.plot([1,2,3])
for i in range(6):
D = Df_all[Df_all['Activity']==i+1]
plt.subplot(3,2,i+1)
plt.plot(D['userAcceleration.z'][:200])
plt.title(listDict[i])
plt.ylim([-1, 1])
plt.tight_layout()
df_sum = Df_all.groupby('Exp_num', axis=0).mean().reset_index()
df_sum.columns = df_sum.columns.str.replace('.','_sum_')
df_sum_SS = np.power(Df_all.astype(float),2).groupby('Exp_num', axis=0).median().reset_index()
df_sum_SS.columns = df_sum_SS.columns.str.replace('.','_sumSS_')
df_max = Df_all.groupby('Exp_num', axis=0).max().reset_index()
df_max.columns = df_max.columns.str.replace('.','_max_')
df_min = Df_all.groupby('Exp_num', axis=0).min().reset_index()
df_min.columns = df_min.columns.str.replace('.','_min_')
df_skew = Df_all.groupby('Exp_num', axis=0).skew().reset_index()
df_skew.columns = df_skew.columns.str.replace('.','_skew_')
df_std = Df_all.groupby('Exp_num', axis=0).std().reset_index()
df_std.columns = df_std.columns.str.replace('.','_std_')
Df_Features = pd.concat([ df_max , df_sum[df_sum.columns[2:-2]],
df_min[df_min.columns[2:-2]], df_sum_SS[df_sum_SS.columns[2:-2]],
df_std[df_std.columns[2:-2]], df_skew[df_skew.columns[2:-2]]], axis=1)
Df_Features_1 = Df_Features.drop(['Exp_num','Unnamed: 0','Activity','Sub_Num'],axis=1)
Labels = Df_Features['Activity']
from sklearn.model_selection import train_test_split
X_train, X_test, y_train, y_test = train_test_split(Df_Features_1, Labels, test_size=0.25, random_state=42)
X_shape = Df_Features_1.shape[1]
Cluss_Num = len(Activety_Types)
X = tf.placeholder(dtype=tf.float32,shape=[None,X_shape])
y = tf.placeholder(dtype=tf.float32,shape = [None,Cluss_Num])
Hold_prob = tf.placeholder(tf.float32)
def Init_Wightes(shape1):
W = tf.truncated_normal(shape1,stddev=0.1)
return tf.Variable(W)
def Init_bias(shape1):
b = tf.constant(0.1,shape=shape1)
return tf.Variable(b)
def FC_layer(input1,shape1):
W = Init_Wightes(shape1)
B = Init_bias([shape1[1]])
Wx = tf.matmul(input1,W)
Wx_b = tf.add(Wx,B)
return tf.nn.relu(Wx_b)
H1_size = 54
H2_size = 24
H1 = FC_layer(X, [X_shape,H1_size])
H1_drop = tf.nn.dropout(H1,keep_prob=Hold_prob)
y_pred = FC_layer(H1_drop,[H1_size,len(Activety_Types)])
Err = tf.reduce_mean(tf.nn.softmax_cross_entropy_with_logits_v2(labels=y,logits=y_pred))
Optimaizer = tf.train.AdamOptimizer()
Train = Optimaizer.minimize(Err)
Init = tf.global_variables_initializer()
BatchSize = 64
label_binarizer = sklearn.preprocessing.LabelBinarizer()
label_binarizer.fit(range(Cluss_Num))
X_train_Np = np.array(X_train,dtype=np.float32)
Y_train_Np = np.array(y_train,dtype=np.float32)
X_test_Np = np.array(X_test,dtype=np.float32)
Y_test_Np = np.array(y_test,dtype=np.float32)
Y_test_OH = label_binarizer.transform(Y_test_Np)
Y_test_OH = np.array(Y_test_OH,dtype=np.float32)
Batches = np.array(range(0,X_train_Np.shape[0]-BatchSize,BatchSize))
accuracy = 10
misclass = 1
steps = 5000
with tf.Session() as sess:
sess.run(Init)
for i in range(steps):
BastchNum = np.mod(i,len(Batches)-1)
batch_x = X_train_Np[Batches[BastchNum] : Batches[BastchNum+1] ,:]
batch_y = Y_train_Np[Batches[BastchNum] : Batches[BastchNum+1] ]
batch_y_OH = label_binarizer.transform(batch_y)
batch_y_OH = np.array(batch_y_OH,dtype=np.float32)
sess.run(Train,feed_dict={X:batch_x,y:batch_y_OH,Hold_prob:0.5})
if i%100 == 0:
print('Currently on step {}'.format(i))
print('Accuracy is:')
# Test the Train Model
matches = tf.equal(tf.argmax(y_pred,1),tf.argmax(y,1))
acc = tf.reduce_mean(tf.cast(matches,tf.float32))
print(sess.run(acc,feed_dict={X:X_test_Np,y:Y_test_OH,Hold_prob:1.0}))
print('\n')
Conf = tf.confusion_matrix(tf.arg_max(y_pred,1),tf.arg_max(y,1))
C1 = sess.run(Conf,feed_dict={X:X_test_Np,y:Y_test_OH,Hold_prob:1.0})
def plot_confusion_matrix(cm,
target_names,
title='Confusion matrix',
cmap=None,
normalize=True):
accuracy = np.trace(cm) / float(np.sum(cm))
misclass = 1 - accuracy
if cmap is None:
cmap = plt.get_cmap('Blues')
plt.figure(figsize=(8, 6))
plt.imshow(cm, interpolation='nearest', cmap=cmap)
plt.title(title)
plt.colorbar()
if target_names is not None:
tick_marks = np.arange(len(target_names))
plt.xticks(tick_marks, target_names, rotation=45)
plt.yticks(tick_marks, target_names)
if normalize:
cm = cm.astype('float') / cm.sum(axis=1)[:, np.newaxis]
thresh = cm.max() / 1.5 if normalize else cm.max() / 2
for i, j in itertools.product(range(cm.shape[0]), range(cm.shape[1])):
if normalize:
plt.text(j, i, "{:0.4f}".format(cm[i, j]),
horizontalalignment="center",
color="white" if cm[i, j] > thresh else "black")
else:
plt.text(j, i, "{:,}".format(cm[i, j]),
horizontalalignment="center",
color="white" if cm[i, j] > thresh else "black")
plt.tight_layout()
plt.ylabel('True label')
plt.xlabel('Predicted label\naccuracy={:0.4f}; misclass={:0.4f}'.format(accuracy, misclass))
plt.show()
Conf = tf.confusion_matrix(tf.arg_max(y_pred,1),tf.arg_max(y,1))
plot_confusion_matrix(C1,target_names=[*Activety_Types])
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。
答案 1 :(得分：0)
您需要将getDocFinancialInfo方法移到render方法之外。因为它是组件类的方法。