首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Axios从WordPress REST获取单篇文章的更好方法

React Axios是一个用于在React应用中进行HTTP请求的库。WordPress REST是WordPress提供的一组API,用于访问和操作WordPress站点的内容。获取单篇文章的方法可以使用WordPress REST的/wp/v2/posts/{post_id}端点。

更好的方法是使用React Hooks来处理数据获取和状态管理。可以使用useEffect钩子来发送HTTP请求,并使用useState钩子来保存获取到的文章数据。以下是一个示例代码:

代码语言:jsx
复制
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const SinglePost = ({ postId }) => {
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const response = await axios.get(`/wp/v2/posts/${postId}`);
        setPost(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchPost();
  }, [postId]);

  if (!post) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }}></div>
    </div>
  );
};

export default SinglePost;

在上面的代码中,我们使用axios库发送HTTP GET请求来获取指定ID的文章数据。使用useState来保存文章数据,并在组件渲染时进行条件渲染,如果文章数据还未加载完成,则显示"Loading...",否则显示文章的标题和内容。

这种方法的优势是使用了React Hooks来处理数据获取和状态管理,使代码更加简洁和易于维护。同时,使用WordPress REST API可以方便地获取和操作WordPress站点的内容。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云内容分发网络(CDN)等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。

腾讯云官网链接:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

php 获取连续id,WordPress文章ID连续及ID重新排列方法

请看让Wordpress文章ID重新排列方法介绍。 前面我们介绍过让Wordpress文章ID连续方法,如果以前Wordpress发表过文章造成ID不连续,我想让ID连续有什么办法,当然有咯。...现在就顺便介绍让Wordpress文章ID重新排列方法。...n+1,其中n为 wp_posts中最大ID数(PS:有点回到高考感觉^_^) BUG:这种方法会造成文章没有关键字,评论不会对应原来文章,对应是原来ID 方法B: 一、导出Wordpress所有文章...备注:其实之所以不连续原因是里面有草稿 如何区分草稿和正式文章,数据库里面有个post_status  值为publish就是正式文章 未经允许不得转载:肥猫博客 » php 获取连续id,WordPress...文章ID连续及ID重新排列方法

9.2K40

利用 Axios + WP REST API 实现评论列表获取 + 内容发送

背景 这里有个用户提 issue (我自己转发),之后一个月左右不会再周更 Tony 主题了,所以赶快把这个需求做了 代码 使用 Vue.js + Axios.js + WordPress REST...API 来实现在快速预览展开情况下获取评论列表并支持发送评论 在使用 WordPress REST API 发送 POST 请求时需要使用内置函数 wp_create_nonce( 'wp_rest...' ) 获取 REST API 识别码并且添加到请求头部 preview: function (postId) { //预览文章内容 var previewingPost = $('.article-list-item...id="new_comments" style="margin-top:40px">'; if (postId === pre_post_id) { // 若点击当前已打开文章按钮...$('#' + postId).html('Nothing Here'); } }); } ↑ 整个 Vue.js Preview 方法

53920
  • 怎样控制wordpress博客首页博文显示内容字数!

    爱优博客是用wordpress程序做,但是默认wordpress首页博客文章内容显示很,整个页面显示不了几篇文章,有时写文章全部都显示在了首页了。...自己在网站搜索了下找到了5种不用插件解决文章显示字数方法: 1. 使用the_excerpt标签 (缺点:需要改动模版,而且显示是纯文本。...优点:一劳永逸直接把想要部分来做摘要) 使用方法,注意是编辑你模版中(wp-contant/themes/你模版/index.php) 文件)。 找到 输入数字:你想要显示文章字数 3.使用more标签 (缺点:每次都要加一下这个东西,不灵活只能一刀切。优点:方法比较正规不需要改动模版) 在你需要截断地方(就是你编辑框)加 在之前内容非单篇post情况下作为摘要显示。 小提示:如何在quicktags栏中显示more按钮。 在你使用themeindex.php中查找<?

    1.1K30

    React 应用中获取数据

    你还需要考虑用何种技术获取数据、数据存储在哪里。 在教程结束后,你会清楚知道 React 中该如何获取数据,不同方法利弊和如何在 React 应用中使用这些技术。...因为我希望数据一直是最新,所以,会以轮询方式通过 REST API 获取远程数据。 但是,初始化数据也非常重要。React 组件生命周期方法允许你在特定时间执行你需要业务逻辑。...componentDidMount()方法会在组件可访问时候执行,此时就可以改变组件 state。这时候获取远程数据是非常合适。...数据更新频率 在 componentDidMount() 方法中初始化数据是很合理,但是,我需要经常更新数据。基于 REST API,只有通过轮询方式解决。...我们也提到了相关生命周期方法、轮询、进度条和错误处理。 我们也了解到两个基于 promise 库:fetch API 和 axios.js。现在,你可以构建自己 React 应用了。

    8.4K20

    利用 WordPress REST API 给 WordPress 做一个归档页面吧

    背景 才发现好像没做博客必须一个功能——归档,赶快补上吧 查询了 WordPress REST API 文档之后,发现每次请求文章总数( 也就是 per_page 参数 )不可以超过 100,但是归档页面理应展示全部文章...,于是需要在 function.php 增加以下钩子和函数拓宽这个限制 https://github.com/WP-API/WP-API/issues/2914 add_filter( 'rest_post_collection_params...} return $params; } 代码 WordPress REST API 默认以 date (文章发布日期) 来排序文章输出,所以可以遍历全部文章,判断上下篇发布年份来按照年份归档文章...//获取文章列表 axios.get('https://www.ouorz.com/wp-json/wp/v2/posts?...== this.last_year ){ //当前文章发布年与上一篇不同 this.posts_array[k += 1] = []; //初始化数组

    48540

    使用 React 和 Django REST Framework 构建你网站

    在我们最近工作中,构建网站使用架构是带有 Django REST Framework(DRF)后端 React 前端。它们是通过在前端使用 axios(前端库)调用后端 API 来交互。...--save axios react-router-dom lodash 现在,我们先只展示将前端连接后端主要部分。...一旦完成,我们就可以使用我们存储 token 令牌来创建一个基于 axios API 客户端(译者注:这样就不需要每次都显式将令牌信息 store 中拿出来再插入 payload 中了),这样我们...React 组件中其他地方进行其他 API 调用就很方便了。...你现在可以尝试使用 Auth.js 登录功能来获取我们之前创建用户身份验令牌。

    7.1K70

    WordPress 主循环和全局变量

    当我们进行 WordPress 开发时候,首先我们必须要了解主循环和全局变量,这样才知道在主循环中可以访问哪个全局变量 下面就讲解下 WordPress 主循环,以便能更好理解哪些全局变量可以被主循环中模板函数调用...WordPress 主循环 WordPress 主循环(The Loop)是用来显示文章列表,和在单篇文章页面页显示留言列表。 在主题 index.php 中,主循环代码如下: <?...the_post 函数获取第一篇文章,并设置文章数据(如作者,是否多个分页等等),赋给 $post 这个全局变量,所以我们可以访问它。...下面就是现在可用部分模板函数: the_author:获取作者名字。 the_title:显示当前文章标题。 the_content:显示文章内容。...注意通过这种方法获取文章内容是没有经过 WordPress 过滤器接口,不过你想自己去操纵文章内容,比如自己设置文章内容显示方式,通过这种方式获取文章内容是非常有用。

    66710

    实战 React 18 中 Suspense

    Suspense 来了 我们应该用来取而代之,是新Suspense组件(虽然它已经存在于 React 17 中,但现在是推荐方法),此组件将会按照以下方式工作: }> 上面的代码将会包裹一个组件,这个组件某些数据源中加载数据,并在完成数据获取之前显示fallback。...Suspense 是什么 简而言之,可能和你想不同,Suspense 并不是一个新用于获取数据接口,因为该工作仍然由诸如“fetch”或“axios”等库委派执行,而它实际上允许你将这些库与 React...在这里我使用了axios,但你可以根据自己需要使用任何东西。 在组件中读取数据 当获取方面的所有内容都准备好后,我们来在组件中使用它。假设有一个简单组件,只需某个接口读取名称列表并打印。...或其他什么你需要自定义组件。 结论 长时间使用useEffect以实现相同结果后,当我第一次看到 Suspanse 这种用法时,我对这种新方法有些怀疑。包装获取整个过程有点让人生疑。

    37910

    展示 Postlight WordPress + React Starter Kit

    认识 Post light WordPress + React Starter Kit,这是一个免费零到神工具箱,适用于需要在自己 PC 上轻松评估Headless WordPress 建筑师和物品爱好者...你文章组知道并喜欢 WordPress,但是你项目和技术组需要利用当今网络改进工具和标准来构建站点或潜在可移植应用程序。...当你克隆 Postlight WordPress + React Starter Kit 时,你将获得以下内容: 引导中心 WordPress 机构安装程序内容。...WordPress 模块在 WP REST 编程接口(ACF 到 WP 编程接口和 WP-REST 编程接口 V2 菜单)中发现那些自定义字段和 WordPress 菜单。...有许多方法可以设置和设计Headless WordPress,并且你可以在前端使用无数响应库和结构来完成你工作。

    1.1K31

    零打造一款轻量且天然支持SSRCMS系统——simpleCMS

    2年前笔者开发了一款基于 nodejs 全栈开源 cms 系统 XPCMS, 主要是为了解决技术开发者搭建自身内容平台局限以及降低使用成本, 虽然1.0版本已经完成, 但是整体部署和二次开发便捷度上还是存在很多缺点...(结合nodejs实现前后端同构, 且天然ssr) 后台管理: umi3.0 + react + antd + axios + typescript(当然还用了很多前端插件, 比如富文本, md编辑器...前台基本功能分析 前台主要是我们博客网站, 这里采用 pug 这个模版引擎来实现, 交互功能使用大家最熟悉jquery.前台基本模块有: 博客首页 文章列表页 文章详情页 对应交互功能有点赞, 评论...数据统计功能实现 数据统计主要是统计网站pv, 单篇文章阅读量和点赞量, 为了更好进行分析我们需要对单日数据进行统计和存库, 具体实现就是利用定时任务在一天结束前进行数据统计, 这里我们用 node-schedule...国际化方案 多语言主要使用react-intl, 由于umi 对其有很好集成, 所以说我们只需要搭建基本多语言规则即可.

    1.7K00

    React + Node.js 全栈实战教程 - 手把手教你搭建「文件上传」管理后台

    + Axios + Node.js + Express 搭建「文件上传」管理后台 React + Nodejs 搭建带预览「上传图片/预览」管理后台 React + Axios + Node.js...[fileInfos, setFileInfos] = useState([]); const progressInfosRef = useRef(null) } 状态定义好后,我们在添加一个获取文件方法...selectedFiles, 在上面的代码中 我们使用 Array.from 方法将可迭代数据转换数组形式数据,接着使用 map 方法将文件进度信息,名称信息存储到 _progressInfos...,我们将会调用获取所有文件数据接口,并将获取数据展示出来。...Axios + Node.js + Express 搭建「文件上传」管理后台 React + Nodejs 搭建带预览「上传图片/预览」管理后台 React + Axios + Node.js +

    15.3K10

    怎样创建你第一个React Native App

    ,以及如何选定技术堆栈入手。...什么是 React Native Starter? 首先,所有创建应用程序的人通常都会面临相同旧问题。这包括需要了解要选择适当技术栈,正确添加导航方法以及知道管理其数据方法等。...可以使用任意平台和编辑器组合;但是我建议你以下内容开始: Visual Studio Code:现有最佳编辑器示例。...开始你项目 假设你要构建 WordPress 博客移动端形式,并且要使用 RNS。 React Native Starter 随附了几个主题供你选择,你可以从这个列表中选择自己喜欢主题: ?...这是准备就绪初始应用。 优化项目 接下来,你必须微调刚刚创建应用程序,使其符合你应用类型。首先你需要确定程序中需要哪些页面。你正在创建博客页面列表为: 登录 文章列表。 单篇文章页面。

    2.1K20

    WordPress 和 Vue.js 学习资源推荐

    不必无休止地研究和比较不同第三方项目的优缺点,例如 Reac t生态系统中情况(这也是React更庞大生态系统缺点)。...如果是完全在编程所有方面都是零基础,还希望对前端有些了解,强烈建议 HTML & CSS这个播放列表看起。...然后,他每年都会发一篇关于这一年学习编程语言方法和语言选择建议视频,搜索年份号码就能找到了,可以作为自己学习计划很好参考。 ?...作者 Paulund ,用Vue开发WordPress主题一系列文章,写很棒,网站也很简洁大方 how to work with Vue & the REST API....Gutenberg 用Vue替代WordPressReact offline-first SPA using Vue.js, the WordPress REST API and Progressive

    1.4K20

    WordPress.com 还是使用 PHP+MySQL

    最近 WordPress.com 发布了 Calypso 这个全新界面和 Mac 桌面程序,然后网上一大堆人说 WordPress.com 放弃 PHP +MySQL了,基于NodeJS+React重构了...首先来了解下 Calypso 是什么,Calypso 是 WordPress.com 新前端,基于 WordPress.com REST API,全新设计 WordPress Dashboard...仔细阅读上面这段话,可以得到几个信息: Calypso 只是一个前端单页 Web 程序,它界面可以看到它是博主更新和管理博客内容后台,并不涉及到 WordPress.com 核心。...Calypso 是基于 WordPress.com REST APIWordPress.com REST API 是基于什么写?当然还是PHP+MySQL。...所以 WordPress.com 并没有放弃 PHP,只是使用 NodeJS+React 重构了博主管理后台,就是这样简单事情,竟然被国内外一些科技媒体描述成 PHP 被放弃了,想想都醉了。

    46730

    在线教育直播源码中React特性解读

    推荐:   局部状态:ReactuseState,useReducer,useContextHooks   通过GraphQL远程状态:ApolloClient   通过REST远程状态:ReactHooksorRedux.../MobX/MobxStateTree   在线教育直播源码React样式库 虽然关于React样式处理有很多解决方法,但是作为一个React初学者,刚开始使用内联样式和基本CSS是很好。...CSSModules受到create-react-app支持,并为您提供了将CSS封装到模块中方法。这样,它就不会意外地泄漏到其他人样式中。...但是,有时候不仅需要提供复杂异步请求,还需要它们具有更强大功能,而且只是一个轻量级库。我推荐这些库之一称为axios。当您应用程序增大时,可以使用它来代替本地获取API。   ...建议:   浏览器本地fetchAPI axios ApolloClient  综上只是在线教育直播源码中React小部分解读,React是一个灵活框架,您可以自己决定选择哪些库。

    1.4K40
    领券