如何使用React将WordPress RestAPI获取的数据渲染为HTML格式

1. 修复useEffect无限循环问题 #

你当前的useEffect依赖数组包含posts变量，每次请求完成调用setPosts更新posts后，会再次触发useEffect执行，陷入无限请求的死循环，这会直接导致数据渲染异常。修正后的数据获取代码如下：

//fetching the pages
useEffect(()=>{
  Axios.get("https://www.eswaran.no/wp-json/wp/v2/pages")
  .then(response => {
    setPosts(response.data);
    // 新增日志排查excerpt是否有返回值
    console.log('接口返回数据', response.data)
  })
}, [setPosts])

依赖项改为仅包含setPosts（useState返回的更新函数是稳定引用，不会触发重复执行），如果只需要组件挂载时拉取一次数据，也可以直接用空数组作为依赖。

2. 排查excerpt字段返回情况 #

打开控制台查看刚才新增的日志，确认每一条post数据下是否存在excerpt.rendered字段：

• 如果字段为空：
  • 确认你是否错拉了page（页面）数据，如果你的业务需要获取文章内容，接口地址应该改为https://www.eswaran.no/wp-json/wp/v2/posts
  • 如果你确实需要拉取页面数据，前往WordPress后台开启页面自动生成摘要功能，或给对应页面手动填写摘要
• 如果字段有值但前端不显示：
  打开浏览器元素审查工具，查看对应摘要节点的样式，确认是否存在display: none、字体颜色与背景一致、字号为0等隐藏样式，调整对应CSS即可正常显示。

3. 新增兜底兼容逻辑 #

修改摘要渲染代码，增加可选链和兜底内容，避免字段不存在导致页面报错：

<div className="page-list">
  {posts && posts.length && posts.map((post, index) => {
      return (
        <div key={post.id} className="page">
          <h2>{post.title.rendered}</h2>
          <h4>{moment(post.date).format('Do MMMM YYYY')}</h4>
          {/* 新增可选链和兜底 */}
          <div dangerouslySetInnerHTML={{  __html: post?.excerpt?.rendered || '暂无摘要'}}  />
          <a href={post.link} target="_blank">Go to page</a>
        </div>
      );
    })}
</div>

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