{
  "id": "react/warning-react-dom-production-minification-issue",
  "signature": "Warning: ReactDOM: Expected `dangerouslySetInnerHTML` to be a string, but got `object` instead.",
  "signature_zh": "警告: ReactDOM: 期望 `dangerouslySetInnerHTML` 是一个字符串，但得到了 `object`。",
  "regex": "Warning: ReactDOM: Expected `dangerouslySetInnerHTML` to be a string, but got `object` instead\\.",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "The `dangerouslySetInnerHTML` prop expects an object with a `__html` key containing a string, but a raw object or non-string value was passed, often due to misusing the prop or passing a component/JSX element instead of HTML string.",
  "root_cause_type": "generic",
  "root_cause_zh": "`dangerouslySetInnerHTML` 属性期望一个包含 `__html` 键的对象，其值为字符串，但传递了原始对象或非字符串值，通常是由于误用该属性或传递了组件/JSX 元素而不是 HTML 字符串。",
  "versions": [
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.0.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 16.14.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Pass a plain string directly to dangerouslySetInnerHTML without the __html wrapper",
      "why_fails": "dangerouslySetInnerHTML requires an object with __html key; passing a string directly will cause a different error.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    },
    {
      "action": "Use innerHTML property directly on the DOM element via ref",
      "why_fails": "Direct DOM manipulation bypasses React's reconciliation and can lead to inconsistencies, but it's also not the intended fix for this warning.",
      "fail_rate": 0.85,
      "condition": "",
      "sources": []
    },
    {
      "action": "Ignore the warning because the HTML still renders",
      "why_fails": "The warning indicates a potential XSS vulnerability or incorrect rendering; ignoring it can lead to security issues or broken UI.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Correct the usage: pass an object with __html key containing a sanitized HTML string. Example: <div dangerouslySetInnerHTML={{ __html: '<p>Hello</p>' }} />",
      "success_rate": 0.95,
      "how": "Correct the usage: pass an object with __html key containing a sanitized HTML string. Example: <div dangerouslySetInnerHTML={{ __html: '<p>Hello</p>' }} />",
      "condition": "",
      "sources": []
    },
    {
      "action": "If you're trying to render React components dynamically, use a different approach like using a state variable or a render prop instead of dangerouslySetInnerHTML.",
      "success_rate": 0.8,
      "how": "If you're trying to render React components dynamically, use a different approach like using a state variable or a render prop instead of dangerouslySetInnerHTML.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Sanitize the HTML string using a library like DOMPurify before passing it to dangerouslySetInnerHTML to prevent XSS attacks.",
      "success_rate": 0.9,
      "how": "Sanitize the HTML string using a library like DOMPurify before passing it to dangerouslySetInnerHTML to prevent XSS attacks.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Correct the usage: pass an object with __html key containing a sanitized HTML string. Example: <div dangerouslySetInnerHTML={{ __html: '<p>Hello</p>' }} />",
    "If you're trying to render React components dynamically, use a different approach like using a state variable or a render prop instead of dangerouslySetInnerHTML.",
    "Sanitize the HTML string using a library like DOMPurify before passing it to dangerouslySetInnerHTML to prevent XSS attacks."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.84,
  "fix_success_rate": 0.93,
  "resolvable": "true",
  "first_seen": "2024-05-10",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}