如何使用 React 以 html 格式显示从 Wordpress Rest API 获取的数据？答案

【问题标题】：How to display data fetched from Wordpress RestAPI in html format using React?如何使用 React 以 html 格式显示从 Wordpress Rest API 获取的数据？
【发布时间】：2022-01-06 16:51:04
【问题描述】：

使用 React，我正在尝试从 WordPress API 获取页面数据。 pic of my current output

如您所见，日期和标题数据正常显示，但摘录未正确呈现。我不确定如何解决这个问题。下面是我用来获取和显示数据的代码：

获取数据：

//fetching the pages
  useEffect( ()=>{
    Axios.get("https://www.eswaran.no/wp-json/wp/v2/pages").
    then(response => {
      setPosts(response.data);
      
    }, [posts, setPosts]);
})

显示数据：

<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>

【问题讨论】：

但是...这正是返回 API 的内容。你的代码做得很好。
一旦我们得到结果，有没有办法删除那些“[vc_row]”之类的东西？如果我无法取回 html，我只想拥有普通文本

标签： javascript reactjs wordpress api

【解决方案1】：

好的，您的 Api 可以很好地返回数据。

所以为了去掉括号，你可以使用正则表达式：

  {posts && posts.length && posts.map((post, index) => {
      const cleanExcerpt = post.excerpt.rendered.replace(/\[([^\[])*(\])/g, '');

      return (
        <div key={post.id} className="page">
          <h2>{post.title.rendered}</h2>
          <h4>{moment(post.date).format('Do MMMM YYYY')}</h4>
          <div dangerouslySetInnerHTML={{  __html: cleanExcerpt }}  />
          <a href={post.link} target="_blank">Go to page</a>
        </div>
      );
    })}

【讨论】：

非常感谢：D！这解决了问题。