TypeError: undefined не является объектом (оценка 'object ['body']')

я получил массив с сервера. вот массив:

[{"тело":"один"},{"тело":"два"},{"тело":"три"}]

в компоненте 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.info(object['body'])// <-- what is the problem?
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default Home2;

когда код запускается, он показывает TypeError: undefined не является объектом (оценка 'object ['body']')

в чем проблема? как в console.info «один»?

Когда вы console.info(object), что он регистрирует? Если он регистрирует {"body":"one"}, вы можете просто вызвать object.body. Но я думаю, что он войдет в журнал undefined

— 12.12.2020 16:48

n.b: render вызывается перед componentDidMount (см.: reactjs.org/docs/react-component.html#mounting)

— 12.12.2020 16:49

javascript reactjs

12.12.2020 16:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 631

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваш метод рендеринга вызывается перед методом componentDidMount. Поэтому вам нужно проверить, существует ли ваш объект, прежде чем пытаться получить доступ к его свойству.

также вам нужно решить, какое значение вы хотите установить в статусе (это строка или массив? из вашего кода кажется, что это должен быть массив объектов )

попробуй сделать так:

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.info(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;

12.12.2020 16:58

Ответ принят как подходящий

Как отмечают люди в комментариях, начальная буква 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.info(object['body'])// <-- what is the problem?
    return (
        <div>
            <h1>Hello</h1>
        </div>
    );
}

Я также нашел этот интересный ответ, объясняющий больше о жизненном цикле initial render и React's: https://stackoverflow.com/a/45343644/5745962

12.12.2020 16:58