当从api调用响应设置值时，componentDid mount错误

Question

我有一个disableButton: boolean;，并希望根据这个GET的响应设置它的值:

async getDocStatus(policy: string): Promise<boolean> {
return await ApiService.getData(this.apiUrl + policy + this.myEndpoint).then(
(response) => response.data
);
}

我想在我的页面加载时这样做，所以我添加了呼叫我的componentDidMount:

componentDidMount() {
const queryString = require('query-string');
const parsed = queryString.parse(location.search);
return this.reissueCertService.getDocStatus(parsed.pol).then(response => {
this.setState({disableButton: response});
}).catch((error) => {
this.loggingService.logError('Error returning Docs ' + error);
});
}

我的问题是，当我加载我的页面我得到这个错误，我不确定它告诉我什么或如何修复它。有人能给点建议吗?

TypeError: Cannot read properties of undefined (reading 'getDocStatus')CertificateDisclaimer . ./src/组件/证书/Certificate.tsx.Certificate.componentDidMountC:/git/ui.myui/src/组件/证书/Certificate.tsx: 3835 | componentDidMount() {36 | const queryString = require('query-string');37 | const parsed = queryString.parse(location.search);38 | this.reissueService.getDocStatus(analyzed .policy)。(反应=比;{40 |这个。设置状态({disableButton:响应});{}).catch((error) =>{查看编译扩充了19个堆栈帧。commitLifeCyclesC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 19814commitLayoutEffectsC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 22803HTMLUnknownElement.callCallbackC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 188invokeGuardedCallbackDevC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 237invokeGuardedCallbackC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 292commitRootImplC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 22541unstable_runWithPriorityC:/git/ui.myui/node_modules/调度器cj/scheduler.development.js: 653runWithPriority 1美元C:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 11039commitRootC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 22381finishSyncRenderC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 21807performSyncWorkOnRootC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 21793(匿名函数)C:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 11089unstable_runWithPriorityC:/git/ui.myui/node_modules/调度器cj/scheduler.development.js: 653runWithPriority 1美元C:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 11039flushSyncCallbackQueueImplC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 11084flushSyncCallbackQueueC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 11072scheduleUpdateOnFiberC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 21199enqueueSetStateC:/git/ui.myui/node_modules/react-dom cj/react-dom.development.js: 12639文档. ./node_modules//cj/react.development.js.Component.setState反应C:/git/ui.myui/node_modules//cj/react.development.js反应:471▲扩充了19个堆叠帧。(匿名函数)C:/git/ui.myui/src/集装箱/文档/Document.tsx: 3734 | const queryString = require('query-string');35 | const parsed = queryString.parse(location.search);36 |返回this.listingService.getDocs(analyzed .policy)。(文档=比;{37 |这个。setState({isLoading: false, docs});38 | return docs;39 |}).catch((error) =>{this.loggingService. 40logError('错误返回文档' +错误);查看编译此屏幕仅在开发中可见。如果应用程序在生产中崩溃，它将不会出现。打开浏览器的开发人员控制台，进一步检查此错误。

这是我的组件类:

import * as React from 'react';
import './Certificate.css';
import { PackRow } from '../../services/DocService/DocService';
import { LoggingService } from '../../services/logging/LoggingService';
import Cookies from 'js-cookie';
import crypto from 'crypto';
import { Reissue } from '../reissue/Reissue';
import { Button } from '@digital/react-avis-atom';
import { ReissueService } from 'src/services/ReissueService/ReissueService';
interface Props {
pol: string;
triggerReload: () => void;
packs: PackRow[];
}
interface State {
disableButton: boolean;
showPrompt: boolean;
}
export class Certificate extends React.Component<Props, State> {
loggingService: LoggingService;
reissueCertService: ReissueService;
constructor(props: Props) {
super(props);
this.loggingService = new LoggingService();
this.state = {
disableButton: false,
showPrompt: false
};
}
componentDidMount() {
const queryString = require('query-string');
const parsed = queryString.parse(location.search);
return this.reissueCertService.getDocStatus(parsed.pol).then(response => {
this.setState({disableButton: response});
}).catch((error) => {
this.loggingService.logError('Error returning Docs ' + error);
});
}
onAgreement = (pol: string) => () => {
if (this.consentGiven(this.props.pol)) {
return;
}
this.loggingService.logCertAndDiscAgreement(
'Uploading cert and disc agreement',
pol
);

let content = '';
this.props.packs.forEach(pack => {
pack.docDisplay.forEach(docRow => {
if (docRow.docName === 'Certificate and Disc') {  
content += this.getDocumentId(docRow.docUrl) + ';';
}
});
});
const ref = crypto.createHash('sha1').update(pol).digest('hex');
Cookies.set('CONSENT_' + ref, content, { expires: 365,  path: '' });
this.props.triggerReload();
}

consentGiven = (pol: string) => {
const ref = crypto.createHash('sha1').update(pol).digest('hex');
const consentedDocs = Cookies.get('CONSENT_' + ref) || null;
if (consentedDocs === null) {
return false;
}

let consent = true;
this.props.packs.forEach(pack => {
pack.docDisplay.forEach(docRow => {
if (
docRow.docName === 'Certificate and Disc'  
&& !consentedDocs.includes(this.getDocumentId(docRow.docUrl))) {
consent = false;
}
});
});
return consent;         
}

certDiscCount = () => {
let count = 0;
this.props.packs.forEach(pack => {
pack.docDisplay.forEach(docRow => {
if (docRow.docName === 'Cert and Disc') {
count++;
}
});
});
return count;       
}

getDocumentId = (docUrl: string) => {
const docPath = docUrl.match(//documents/(.+?)//g);
const docPathElements = docPath !== null ? docPath[0].split('/') : null;
return docPathElements !== null && docPathElements.length > 3 ? docPathElements[2] : '';        
}

consentBox = (pol: string) => {
return this.consentGiven(pol) ? 'consent-cell--agreement consent-cell--agreed' : 'consent-cell--agreement';
}

showReissue = () => {
this.setState({ showPrompt: true });
}

hideReissue = () => {
this.setState({ showPrompt: false });
}

disableButton = () => {
this.setState({ disableButton: true });
}
render() {
const { pol } = this.props;
if (this.certDiscCount() === 0) {
return ('');
}
return (
<table className="consent-table">
<thead>
<tr>
<th colSpan={2}>
<span>
Details
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td className="consent-cell consent-cell--text">
Your docs are available for
download and print.<br/>
</td>
</tr>
<br />
<tr>
<td>
<table className={this.consentBox(pol)}>
<tbody>
<tr>
<td className="consent-cell consent-cell--text">
<label>
<input 
type="radio"
checked={this.consentGiven(pol)} 
onChange={this.onAgreement(pol)} 
/>
&nbsp;&nbsp; Agree and access
</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<Button
onClick={this.showReissue}
primary={true}
fullWidth={false}
disabled={this.state.disableButton}
>
If you cannot print in colour please click here
</Button>
<Reissue
handleClose={this.hideReissue} 
disableButton={this.disableButton}
showPrompt={this.state.showPrompt} 
pol={this.props.pol}
/>
</td>
</tr>
</tbody>
</table>
);
}
}

Answer 1

看起来您错过了设置组件的reissueCertService。

constructor(props: Props) {
super(props);
this.loggingService = new LoggingService();
// add this line
this.reissueCertService = new ReissueService();
this.state = {
disableButton: false,
showPrompt: false
};
}