React报错：`props.dangerouslySetInnerHTML`需为`{__html: ...}`格式

错误信息：

react-dom.development.js:2952 Uncaught Error: `props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`.

相关代码：

...
const [response, setResponse] = useState('Order created.');
...
var responseText = `<p>${resp.data.text} - <a href="home/bake" target="_blank">Bake ID [${resp.data.bake_id}]</a></p>`;
console.log(responseText);
// <p>Order placed successfuly. - <a href="home/bake" target="_blank">Bake ID [123]</a></p>
setResponse({ __html: responseText });
...

<span dangerouslySetInnerHTML={response}></span>

错误原因 #

response状态初始值是字符串类型，但后续更新为{__html: ...}格式的对象。组件首次渲染时，dangerouslySetInnerHTML接收的是字符串，不符合它要求的{__html: string}结构，因此触发报错。

解决办法 #

方法1：统一状态类型（推荐） #

初始化状态时就使用符合dangerouslySetInnerHTML要求的对象结构，确保首次渲染和后续更新的类型一致：

const [response, setResponse] = useState({ __html: 'Order created.' });

方法2：渲染时兼容类型 #

如果需要保留初始字符串状态，可在渲染时判断类型并转换为要求的格式：

<span dangerouslySetInnerHTML={typeof response === 'string' ? { __html: response } : response}></span>

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