axios请求后端HTML资源返回对象报错，如何在React中正确嵌入渲染

架构老林

2026-9-25

问题根因

你定义的requestExamplePage是异步函数，调用后返回的是Promise实例，直接将该返回值作为React子元素渲染，就会触发你看到的[object Promise]相关报错，和axios返回结果无关。
responseType: 'document'配置的作用是让axios将HTML响应解析为DOM Document对象，该对象无法直接作为React子元素渲染，不是配置不生效，是不符合你的使用需求。

解决方案

第一步：调整axios请求配置

将responseType改为text，直接获取原始HTML字符串：

import axios from 'axios';

const examplePage = "example.com/example"

export const requestExamplePage = async () => {
    const {data} = await axios.get(examplePage, {responseType: 'text'})
    return data
}

第二步：在React组件中正确处理异步请求和HTML渲染

在副作用钩子中发起异步请求，将拿到的HTML字符串存入状态，通过dangerouslySetInnerHTML属性渲染：

import { useEffect, useState } from 'react';
import { requestExamplePage } from './对应文件路径';

function RenderExternalHtml() {
  const [htmlStr, setHtmlStr] = useState('');

  // 异步请求要在副作用钩子中触发
  useEffect(() => {
    const getPage = async () => {
      const res = await requestExamplePage();
      setHtmlStr(res);
    };
    getPage();
  }, []);

  // 通过dangerouslySetInnerHTML渲染HTML字符串
  return <div dangerouslySetInnerHTML={{ __html: htmlStr }} />;
}

export default RenderExternalHtml;