React Native引入react-native-render-html触发更新深度超限错误求解

核心错误原因 #

你的报错完全是react-native-render-html组件的contentWidth属性传值错误导致的无限重渲染：

• Dimensions.get("window")返回的是包含width/height/scale等属性的对象，不是数值，直接套parseInt转换后会得到NaN
• 组件内部接收到非法的宽度值时，会反复触发布局计算和重渲染逻辑，最终触发最大更新深度限制的报错

修复步骤 #

1. 修正contentWidth传值 #

直接取窗口对象的width属性作为contentWidth即可，不需要parseInt，修改后的HTML组件代码如下：

<HTML
  source={{ html: "<p>Hello World</p>" }}
  contentWidth={Dimensions.get("window").width}
/>

修改后重新运行项目，简单<p>标签即可正常渲染，无限重渲染报错会直接消失。

2. 优化避免重复计算（可选，推荐） #

如果你的页面支持横竖屏切换，建议把窗口宽度存在state中，监听尺寸变化更新，避免render函数重复调用Dimensions.get：

class PostDetail extends React.Component {
  state = {
    // 原有字段不变
    contentWidth: Dimensions.get("window").width
  };

  componentDidMount = async () => {
    // 原有接口请求逻辑不变
    // 新增尺寸变化监听
    Dimensions.addEventListener('change', ({window: {width}}) => {
      this.setState({contentWidth: width})
    })
  };

  componentWillUnmount() {
    // 组件卸载时移除监听避免内存泄漏
    Dimensions.removeEventListener('change')
  }

  render() {
    // 其他代码不变，HTML组件传state里的contentWidth即可
    return (
      // ...
      <HTML
        source={{ html: this.state.content }}
        contentWidth={this.state.contentWidth}
      />
      // ...
    )
  }
}

优化完成后即可正常渲染从WordPress接口获取的富文本内容。

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