TypeError: undefined is not an object（评估'object ['body']'）

Question

我从服务器得到了一个数组。 这是数组：

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

在 Home2 组件中：

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;

当代码运行时，它显示TypeError: undefined is not an object (evalating 'object['body']')

问题出在哪里？ 如何 console.log '一个'？

Answer 1

正如人们在评论中指出的那样，初始render是在componentDidMount之前完成的，所以这就是你收到错误的原因

为了克服这个问题，您可以return一些default值（即Loading... div ），以防this.state.status尚未收到响应：

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

我还发现了这个有趣的答案，解释了有关initial render和React's生命周期的更多信息： https://stackoverflow.com/a/45343644/5745962

Answer 2

您的 render 方法在 componentDidMount 方法之前调用。 因此，在尝试访问他的属性之前，您需要检查您的 object 是否存在。

另外，您需要决定要在状态中设置什么样的值（它是字符串还是数组？从您的代码看来它应该是一个对象数组）

尝试这样做：

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;