TypeError: undefined is not an object (evaluating 'object['body']')

Question

i got an array from server. here is the array:

[{"body":"one"},{"body":"two"},{"body":"three"}]

in Home2 component:

import React, { Component } from 'react';

class Home2 extends Component {
    constructor() {
        super()
        this.state={
            status:''
        }
    }
    componentDidMount(){
        let store = JSON.parse(localStorage.getItem('login'))
        var url = 'http://127.0.0.1:8000/myapi/allpost/?format=json'
        fetch(url,{
            method:'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Token '+store.token
            }
        })
        .then(res=>res.json().then(result=>{
            this.setState({status: result})
        }))
    }
    render() {
        var list = this.state.status
        var object = list[0]
        console.log(object['body'])// <-- what is the problem?
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default Home2;

when the code run, it shows TypeError: undefined is not an object (evaluating 'object['body']')

where is the problem? how to console.log 'one'?

Answer 1

As people pointed out in the comments, an initial render is done before componentDidMount , so that's the reason why you're getting the error

To overcome that, you could return some default value (ie Loading... div ) in case this.state.status has not received the response yet:

render() {
    var list = this.state.status
    var object = list[0]
    if (!object) {
      return (
        <div>
          Loading...
        </div>
      )
    }
    console.log(object['body'])// <-- what is the problem?
    return (
        <div>
            <h1>Hello</h1>
        </div>
    );
}

I also found this interesting answer explaining more about the initial render and React's lifecycle: https://stackoverflow.com/a/45343644/5745962

Answer 2

Your render method is called before componentDidMount method. Therefore you need to check if your object exists before you try to access a property of his.

also, you need to decide what kind of value you want to set in the status (it's a string or an array? from your code it seems like it should be an array of objects )

try to do it like this:

import React, { Component } from 'react';

class Home2 extends Component {
    constructor() {
        super()
        this.state={
            status:[]
        }
    }
    componentDidMount(){
        let store = JSON.parse(localStorage.getItem('login'))
        var url = 'http://127.0.0.1:8000/myapi/allpost/?format=json'
        fetch(url,{
            method:'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Token '+store.token
            }
        })
        .then(res=>res.json().then(result=>{
            this.setState({status: result})
        }))
    }
    render() {
        if(this.state.status.length){
        var list = this.state.status
        var object = list[0]
        console.log(object['body'])// <-- what is the problem?
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
        }
        else {
          return null; //or return in here some kind of loader
        }
    }
}

export default Home2;