如何使用 React 以 html 格式显示从 Wordpress RestAPI 获取的数据？

Question

使用 React，我试图从 WordPress API 获取页面数据。 我当前 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>

Answer 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>
      );
    })}