未捕获的类型错误：尝试显示数据时无法读取未定义的属性“0”

Question

When I try to display patient details, It is showing

Uncaught TypeError: Cannot read property '0' of undefined

Below is the code to get patient details from server. This data is assigned to patientdetails in 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);
        });
    }

Below is the code to display data. I'm using for loop for displaying data.

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>
            )
        }
    }

Data displayed for

console.log(this.state.patientDetails[i]._id)
                console.log(this.state.patientDetails[i])

in for loop.:

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
 

Error message displayed in client consloe:

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.

The error is pointing to the line this.setState( {patientDetails: res.data.patientDetails} ) in getPatients()

Answer 1

Simplify the function using Array.map and object destructuring, it's less error prone (and simple...):

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>
    )
}