React, данные, полученные из модуля (django), не отображаются

Что случилось, ребята... У меня проблемы с отображением моих данных, которые я получаю из моих модулей django. Получение данных вроде бы работает нормально, но они не отображаются. Буду очень признателен за любую помощь. В данный момент отображаются только контейнеры и прочее, но не данные из модуля. Вот мой компонент react:

NewsItemPage.js

import "bootstrap/dist/css/bootstrap.min.css";
import React, {Component, useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import {Card, Col, Container, Row} from "react-bootstrap";
import sheet from "./Images/metal-sheet.jpg";
import "./css/newsItem.css";
import {BoxArrowUpRight, Textarea} from "react-bootstrap-icons";
import {Link} from "react-router-dom";

function withParams(NewsItemPage){
  return props => <NewsItemPage {...props} params={useParams()}/>
}

class NewsItemPage extends Component{
    state={
        item: {},
        loading: true
    }

    async componentDidMount(){

        let {id} = this.props.params;

        try {
            const res = await fetch(`http://localhost:8000/api/news/${id}`);
            const item = await res.json();
            this.setState({
                item: item,
                loading: false
            })
        }catch(e){
            console.log(e);
        }
    }

    render() {
      if(this.state.loading){
        return <h1 className="text-center">Vänligen vänta...</h1>
      }

      console.log(this.state.item);

      return(
        this.state.item ?
          <Container fluid className="news-wrapper ">
            <Row fluid className="news-page-col">
              <Col className="news-page-col text-center mt-5 mb-5">
                <h1>{this.state.item.title}</h1>
                <hr className="divider"/>
              </Col>
            </Row>
            <Row fluid className="gap-5 justify-content-center mt-5">
              <Col>
                <img src={this.state.item.image}  alt="image"/>
              </Col>
            </Row>
            <h4>{this.state.item.date}</h4>
            <Row>
              <Col>
                <Textarea>{this.state.item.description}</Textarea>
              </Col>
            </Row>
          </Container>
          : <h1>Här finns inget ännu...</h1>
      );
    }
}

export default withParams(NewsItemPage);

А вот вывод из 'console.log(this.state.item);' внутри метода render выше:

0
: 
created_on
: 
"2023-01-18T16:01:15.744999Z"
description
: 
"hello this is my testing news"
id
: 
10
image
: 
"http://localhost:8000/Images/Images/shutterstock_634808618-1-1024x683.png"
title
: 
"testing"
[[Prototype]]
: 
Object
length
: 
1
[[Prototype]]
: 
Array(0)

Вернуться на верх