我有一個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：無法讀取未定義的屬性（讀取'getDocStatus'）CertificateDisclaimer../src/components/certificate/Certificate.tsx.Certificate.componentDidMount C:/git/ui.myui/src/components/certificate/Certificate.tsx:38 35 | 組件DidMount() { 36 | const queryString = require('query-string'); 37 | const parsed = queryString.parse(location.search); 38 | this.reissueService.getDocStatus(parsed.policy).then(response => { 40 | this.setState({disableButton: response}); 41 | }).catch((error) => { 查看已編譯的 ▼ 19 個堆疊幀expand.commitLifeCycles C:/git/ui.myui/node_modules/react-dom/cjs/react-dom.development.js:19814 commitLayoutEffects C:/git/ui.myui/node_modules/react-dom/cjs/react-dom .development.js:22803 HTMLUnknownElement.callCallback C:/git/ui。myui/node_modules/react-dom/cjs/react-dom.development.js:11089 不穩定的runWithPriority C:/git/ui.myui/node_modules/scheduler/cjs/scheduler.development.js:653 runWithPriority$1 C:/git/ui .myui/node_modules/react-dom/cjs/react-dom.development.js:11039 flushSyncCallbackQueueImpl C:/git/ui.myui/node_modules/react-dom/cjs/react-dom.development.js:11084 flushSyncCallbackQueue C: /git/ui.myui/node_modules/react-dom/cjs/react-dom.development.js:11072 scheduleUpdateOnFiber C:/git/ui.myui/node_modules/react-dom/cjs/react-dom.development.js： 21199 enqueueSetState C:/git/ui.myui/node_modules/react-dom/cjs/react-dom.development.js:12639 檔案../node_modules/react/cjs/react.development.js.Component.setState C:/ git/ui.myui/node_modules/react/cjs/react.development.js:471 ▲ 擴展了 19 個堆疊框架。（匿名函式）C:/git/ui. myui/src/containers/document/Document.tsx:37 34 | const queryString = require('query-string'); 35 | const parsed = queryString.parse(location.search); 36 | return this.listingService.getDocs(parsed.policy).then(docs => { 37 | this.setState({ isLoading: false, docs }); 38 | return docs; 39 | }).catch((error) => { 40 | this.loggingService.logError('Error returned Docs ' error); 查看已編譯 此螢屏僅在開發中可見。如果應用程式在生產中崩潰，則不會出現。打開瀏覽器的開發者控制臺以進一步檢查此錯誤。38 | 回傳檔案；39 | }).catch((error) => { 40 | this.loggingService.logError('Error returned Docs ' error); 查看已編譯 此螢屏僅在開發中可見。如果應用在生產中崩潰將不會出現。打開您的瀏覽器的開發者控制臺以進一步檢查此錯誤。38 | 回傳檔案；39 | }).catch((error) => { 40 | this.loggingService.logError('Error returned Docs ' error); 查看已編譯 此螢屏僅在開發中可見。如果應用在生產中崩潰將不會出現。打開您的瀏覽器的開發者控制臺以進一步檢查此錯誤。
這是我的組件類：
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)}
/>
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>
);
}
}
uj5u.com熱心網友回復：
看起來您錯過了設定組件的reissueCertService.
constructor(props: Props) {
super(props);
this.loggingService = new LoggingService();
// add this line
this.reissueCertService = new ReissueService();
this.state = {
disableButton: false,
showPrompt: false
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/484025.html
標籤：javascript 打字稿
下一篇：未檢測到聯合型別