Невозможно получить отдельный блог в react с помощью axios

Я потратил несколько времени, пытаясь понять, почему я не могу получить страницу с подробной информацией об отдельной записи в блоге с помощью axios. Код не возвращает никаких данных (он возвращает неопределенное значение). У меня есть следующий код:

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

export default const blog_detail = (props) => {
    const [blog, setBlog] = useState({});

    useEffect(() => {
        const slug = props.match.params.id;

        const fetchData = async () => {
            try {
                const res = await axios.get(`https://example.com/blog/${slug}`);
                setBlog(res.data);
            }
            catch (err) {

            }
        };

        fetchData();
    }, [props.match.params.id]);

    const createBlog = () => {
        return {__html: blog.body}
    };

    const capitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };

    return (
        <div>
            <div dangerouslySetInnerHTML={createBlog()} />
        </div>
    );
};

Код возвращает данные для тех, с кем я практикуюсь, но никогда не работает в моем случае, но все кажется похожим на их

Проверьте вкладку сеть, чтобы увидеть тип ответа, который извлекается или если запрос выполнен или нет, то внесите необходимые изменения.

Решение вопроса оказалось простым, я не мог допустить такой ошибки. На случай, если кто-нибудь столкнется с подобной проблемой и фронтенд будет работать нормально, вот подход, который я использовал. Я проверил serializers.py в бэкенд-приложении и увидел, что я не добавил slug к полю, даже если у меня есть slug в записи блога models.py. Добавление slug к полям в `serializers.py1 решило проблему

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