UseEffect возвращает всю HTML-страницу

Этот компонент React возвращает HTML-страницу в объекте blog.

если я добавлю {blog} к return, он вернет сырой HTML, но не примет, {blog.title} для ie.

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


const BlogDetail = (props) => {
    
    const [blog, setBlog] = useState({})

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

                try {

                    const res = await axios.get(`http://localhost:8000/api/blog/${slug}`);
                    setBlog(res.data);

                } catch (err) {

                }
            
            };

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

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

    return (
        <div className='container mt-3'>
            <h1 className='display-2'>{blog.title}</h1>
            <h2 className='text-muted mt-3'>{blog.category}</h2>
            <div className='mt-5 mb-5' dangerouslySetInnerHTML={createBlog()} />
            <hr />
            <p className='lead mb-5'>
                <Link to='/blog' className='font-weight-bold'>Back to Blog</Link>
            </p>
        </div>
    )
}

Похоже, это происходит потому, что вы устанавливаете для блога значение response.data, поэтому, когда вы пытаетесь получить доступ к blog.body, вы получаете тело страницы HTML, но только потому, что телом ответа, который получает ваш запрос, является сама страница HTML

Возможно, лучшим вариантом будет, если ваш html содержит классы для стилизации на вашем сервере, и просто получить их и вставить в ваш dangerouslySetInnerHTML

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