javascript - 未捕获的类型错误:尝试显示数据时无法读取未定义的属性“0”
问题描述
当我尝试显示患者详细信息时,它正在显示
未捕获的类型错误:无法读取未定义的属性“0”
以下是从服务器获取患者详细信息的代码。此数据分配给 setState 中的患者详细信息。
getPatients = e => {
console.log(this.state)
axios.post('/AdminViewImage', {
_id : localStorage.getItem('id')
}).then( (res) => {
console.log('this is server response ==>'+res.data);
console.log(res.data.patientDetails)
if( res.data.patientDetails.length > 0 ) {
this.setState( {patientDetails : res.data.patientDetails} )
} else {
this.props.history.push( {
pathname : '/upload'
})
}
}).catch( function(error) {
console.log(error);
});
}
下面是显示数据的代码。我正在使用 for 循环来显示数据。
displayPatient() {
console.log( 'patient has this ===>' + this.state.patientDetails );
console.log(this.state.patientDetails);
if( this.state.patientDetails.length !== 0 ){
var rows = [];
console.log(this.state.patientDetails);
for ( var i = 0; i < this.state.patientDetails.length; i++ ) {
console.log("patient for loop is executing" + this.state.patientDetails );
console.log(this.state.patientDetails[i]._id)
console.log(this.state.patientDetails[i])
rows.push(<PatientDetails patientDetail = { this.state.patientDetails[i] }
key = { this.state.patientDetails[i]._id }
onEdit = { this.onEdit.bind(this) } onRequestModel = { this.toggleMobileModal.bind(this) }
onView3DModel = { this.onView3DModel.bind(this) } onGotoPayment = { this.onGotoPayment.bind()} />);
}
return (
<div className = 'patient-details-card-holder' >
{rows}
</div>
)
} else {
return (
<div style = { { textAlign : 'center' } } >
<h4>No records found</h4>
</div>
)
}
}
显示的数据
console.log(this.state.patientDetails[i]._id)
console.log(this.state.patientDetails[i])
在 for 循环中:
patient for loop is executing[object Object],[object Object],[object Object]
16
{_id: 16, pt_doc_id: 1, pt_frontal_image: "uploads\1\16\16_1615032738355.jpeg", pt_lateral_image: "uploads\1\16\16_1615032738364.jpeg", pt_model: "", …}pt_doc_id: 1pt_extra_details: falsept_frontal_image: "uploads\1\16\16_1615032738355.jpeg"pt_lateral_image: "uploads\1\16\16_1615032738364.jpeg"pt_model: ""__v: 0_id: 16__proto__: Object
patient for loop is executing[object Object],[object Object],[object Object]
15
{_id: 15, pt_doc_id: 1, pt_frontal_image: "uploads\1\15\15_1615031083049.jpeg", pt_lateral_image: "uploads\1\15\15_1615031083081.jpeg", pt_model: "uploads\1\15\15_1615032151585.stl", …}pt_doc_id: 1pt_extra_details: falsept_frontal_image: "uploads\1\15\15_1615031083049.jpeg"pt_lateral_image: "uploads\1\15\15_1615031083081.jpeg"pt_model: "uploads\1\15\15_1615032151585.stl"__v: 0_id: 15__proto__: Object
patient for loop is executing[object Object],[object Object],[object Object]
14
{_id: 14, pt_doc_id: 1, pt_frontal_image: "uploads\1\14\14_1615030554445.jpeg", pt_lateral_image: "uploads\1\14\14_1615030554469.jpeg", pt_model: "", …}pt_doc_id: 1pt_extra_details: falsept_frontal_image: "uploads\1\14\14_1615030554445.jpeg"pt_lateral_image: "uploads\1\14\14_1615030554469.jpeg"pt_model: "" __v: 0 _id: 14 __proto__: Object
客户端控制台中显示的错误消息:
Uncaught TypeError: Cannot read property '0' of undefined
at Carousel.getViewData (react-images.es.js:1540)
at Carousel.getCommonProps (react-images.es.js:1394)
at Carousel.render (react-images.es.js:1423)
at finishClassComponent (react-dom.development.js:17485)
at updateClassComponent (react-dom.development.js:17435)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21893)
at Object.enqueueSetState (react-dom.development.js:12467)
at DoctorProfile.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)
at doctor-view-patients.js:111
The above error occurred in the <Carousel> component:
at Carousel (http://localhost:3000/static/js/vendors~main.chunk.js:124453:5)
at div
at DisplayPatientDetails (http://localhost:3000/static/js/main.chunk.js:10314:5)
at div
at div
at div
at Col (http://localhost:3000/static/js/vendors~main.chunk.js:158716:25)
at div
at Row (http://localhost:3000/static/js/vendors~main.chunk.js:163559:25)
at div
at Container (http://localhost:3000/static/js/vendors~main.chunk.js:158999:25)
at div
at DoctorProfile (http://localhost:3000/main.9760d798753c8e506763.hot-update.js:42:5)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:140708:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:140910:29)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:140343:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:139963:35)
at div
at App (http://localhost:3000/static/js/main.chunk.js:208:5)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:140343:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:139963:35)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
错误指向中的this.setState( {patientDetails : res.data.patientDetails} )
行getPatients()
解决方案
使用和对象解构简化函数Array.map
,它更不容易出错(并且简单......):
displayPatient() {
const {patientDetails} = this.state;
console.log( 'patient has this ===>' + patientDetails );
console.log(patientDetails.length);
return patientDetails.length
? (
<div className = 'patient-details-card-holder' >
{patientDetails.map( details => (
<PatientDetails
patientDetail={ details }
key={ details._id }
onEdit={ this.onEdit.bind(this, details) }
onRequestModel={ this.toggleMobileModal.bind(this, details) }
onView3DModel={ this.onView3DModel.bind(this, details) }
onGotoPayment={ this.onGotoPayment.bind(this, details) }
/>
))}
</div>
)
: (
<div style = { { textAlign : 'center' } } >
<h4>No records found</h4>
</div>
)
}
推荐阅读
- html - 我的 Angular 标签输入 matInput 不起作用
- amazon-web-services - 带有 bitbucket 的 AWS Codepipeline 以及如何将分支名称传递给 appspec.yaml
- javascript - 如何发生点击功能不是div而是按钮
- javascript - Firestore 查询函数结果无效
- java - 对如何在 Java 中使用数组中的索引和值感到困惑
- pouchdb - 找不到 express-pouchdb 相关模块
- r - R中的if_else双重标准条件
- linux - Spring框架升级
- matlab - 如何通过单击图中相应的绘图点来选择 UITable 中的单元格?
- angular - identityserver4 添加 api 资源导致未经授权的请求