如何将后端获取的HTML注入React组件？解决Promise渲染报错

错误原因 #

你不能直接把组件定义为async函数——React函数组件必须返回React元素，而async函数返回的是Promise对象，这就是控制台报错Objects are not valid as a React child (found: [object Promise])的核心原因。另外，直接渲染HTML字符串会被React自动转义，必须通过dangerouslySetInnerHTML才能正确插入原生HTML内容。

正确实现方案 #

修改Content组件，使用useState管理HTML内容、加载状态，用useEffect触发异步请求，最后通过dangerouslySetInnerHTML插入HTML：

import { useState, useEffect } from 'react';

export function Content({ resourcePath }) {
  // 管理HTML内容、加载状态、错误信息
  const [htmlContent, setHtmlContent] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [loadError, setLoadError] = useState(null);

  useEffect(() => {
    // 定义异步请求函数
    const fetchHtml = async () => {
      try {
        const response = await fetch(resourcePath, { method: 'GET' });
        // 检查请求是否成功
        if (!response.ok) {
          throw new Error(`HTTP错误：${response.status}`);
        }
        const rawHtml = await response.text();
        setHtmlContent(rawHtml);
      } catch (err) {
        setLoadError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchHtml();
  }, [resourcePath]); // 当resourcePath变化时重新发起请求

  // 加载状态提示
  if (isLoading) {
    return <div>加载内容中...</div>;
  }

  // 错误状态提示
  if (loadError) {
    return <div>内容加载失败：{loadError}</div>;
  }

  // 用dangerouslySetInnerHTML插入HTML（注意格式是{__html: 字符串}）
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

关键说明 #

• 禁止async组件：React不支持直接渲染async函数返回的Promise，必须把异步逻辑放在useEffect内部的函数中执行。
• dangerouslySetInnerHTML的正确格式：必须传入一个包含__html键的对象，值为要插入的HTML字符串——这是React的强制要求，之前你可能没按这个格式使用导致失效。
• 状态管理：添加加载、错误状态可以提升用户体验，避免页面空白或无提示的错误场景。

你的后端Express路由代码无需修改，已经能正确返回HTML内容。

内容的提问来源于stack exchange，提问作者HandsomeGorilla