程序员经验分享-hwhale

未捕获的类型错误：无法读取未定义的属性（读取“渲染”）

2024-03-15

我是 React 新手，正在尝试制作一个无头 WordPress 应用程序。 当我获取帖子时，我只得到第一个值。

我获取帖子并将其保存在状态中

componentDidMount() {
this.setState({ loading: true }, () => {
  axios.get('http://localhost/wpprojekte/ebike/wp-json/wp/v2/posts/426')
    .then(res => {
      this.setState({ loading: false, error: 'no error', post: res.data })
    }).catch(error => {
      console.log(error);
    });
});}

我现在在我的州有一个帖子，看起来像

constructor(props) {
super(props);
this.state = {
  loading: false,
  error: 'error',
  post: {},
}}

当我渲染组件时，我只能从帖子中获取第一个值。 例如this.state.post.date

当我试图得到this.state.post.title.rendered

Uncaught TypeError: Cannot read properties of undefined (reading 'rendered')

这是渲染函数

render() {
console.log(JSON.stringify(this.state.post));
return (
  <div>
    {<div dangerouslySetInnerHTML={{ __html: this.state.post.title.rendered }} />}
  </div>
)}

我不明白为什么它只获得第一个值。

这是控制台日志

  "id": 426,
  "date": "2021-05-07T09:49:37",
  "date_gmt": "2021-05-07T09:49:37",
  "guid": {
    "rendered": "http://localhost/wpprojekte/ebike/?post_type=genusstouren&#038;p=426"
  },
  "modified": "2021-11-30T11:00:28",
  "modified_gmt": "2021-11-30T11:00:28",
  "slug": "schoeningen-helmstedt",
  "status": "publish",
  "type": "genusstouren",
  "link": "http://localhost/wpprojekte/ebike/genusstouren/schoeningen-helmstedt/",
  "title": {
    "rendered": "Genuss Bike Paradies Etappe 10"
  },
  "content": {
    "rendered": "\n<p><strong>Diese Etappe startet in Schöningen und führt am Lappwaldsee durch Helmstedt und den angrenzenden Lappwald nach Wolfsburg.</strong></p>\n\n\n\n<p>Die Route beginnt am Burgplatz nahe des Schlosses Schöningen und führt am ehemaligen Tagebau entlang in Richtung Norden. Dort führt die Tour westlich am Lappwaldsee entlang nahe des Grenzübergangs Helmstedt/Marienborn, welcher der größte und bedeutendste Grenzübergang an der innerdeutschen Grenze war. Von Helmstedt aus, in dessen Altstadt noch immer Teile der Stadtmauer als Wallanlagen zu finden sind, folgt die Route dem Lappwald, führt durch bewaldetes Gebiet und am Kloster Mariental durch Grasleben wieder in westlichere Richtung. Über Feldwege und durch kleinere Ortschaften geht es nach Velpke und von dort aus durch die Velpker Schweiz nach Oebisfelde. Nach Grafhorst und Überquerung der Aller führt die Route am Naturschutzgebiet Wendschotter und Vorsfelder Drömling entlang nach Wolfsburg, wo die Etappe am Wissenschaftsmuseum phaeno endet.</p>\n\n\n\n<p></p>\n\n\n\n<script type=\"text/javascript\" src=\"https://regio.outdooractive.com/oar-harz/de/embed/55540446/js?mw=false\"></script>\n",
    "protected": false
  },
  "excerpt": {
    "rendered": "<p>Diese Etappe startet in Schöningen und führt am Lappwaldsee durch Helmstedt und den</p>\n<div class=\"mehr-erfahren\"><a href=\"http://localhost/wpprojekte/ebike/genusstouren/schoeningen-helmstedt/\" rel=\"nofollow\"><icon class=\"fas fa-angle-double-right\"></icon> mehr erfahren</a></div>\n",
    "protected": false
  },
  "author": 2,
  "featured_media": 442,
  "parent": 0,
  "menu_order": 0,
  "template": "",
  "meta": [],
  "featured_image_src": "http://localhost/wpprojekte/ebike/wp-content/uploads/2021/05/Etappe_10.jpg",
  "_links": {
    "self": [
      {
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/genusstouren/426"
      }
    ],
    "collection": [
      {
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/genusstouren"
      }
    ],
    "about": [
      {
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/types/genusstouren"
      }
    ],
    "author": [
      {
        "embeddable": true,
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/users/2"
      }
    ],
    "version-history": [
      {
        "count": 3,
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/genusstouren/426/revisions"
      }
    ],
    "predecessor-version": [
      {
        "id": 1065,
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/genusstouren/426/revisions/1065"
      }
    ],
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/media/442"
      }
    ],
    "wp:attachment": [
      {
        "href": "http://localhost/wpprojekte/ebike/wp-json/wp/v2/media?parent=426"
      }
    ],
    "curies": [
      {
        "name": "wp",
        "href": "https://api.w.org/{rel}",
        "templated": true
      }
    ]
  }
}

SOLUTION

您收到错误的原因是因为组件已挂载在调用渲染方法之后调用，即在获取帖子之前渲染 UI，它与错误有何关系？现在就是这样了。从你的代码调用this.state.post.date返回 null，它是空的，不会导致任何问题，因为反应生命周期render方法先被调用组件已挂载但打电话this.state.post.title.rendered当未获取帖子或在状态下不可用时，会执行以下操作，首先检查this.state.post.title这是空的，它可以作为日期的值，但调用.rendered现在，在 null 上将抛出您收到的错误。为了确保您不会遇到此类错误，您必须确保定义了标题或在状态上设置了帖子

代码解决方案

用这个替换你的渲染。

render() {
return (
  <div>
    {
      this.state.post.title && (
      <div dangerouslySetInnerHTML={{ __html: this.state.post.title.rendered }} />)
    }
  </div>
)}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

wordpressrestapi

headlesscms

未捕获的类型错误：无法读取未定义的属性（读取“渲染”） 的相关文章

随机推荐

  • 强制不同的线程休眠

    所以我有一个程序可以充当其他程序的 外壳 它的核心是传递一个类 一个方法名称和一些参数 并处理函数的执行 其想法是允许其他程序员基本上安排他们的进程在此 shell 服务上运行 除了一个问题之外 一切正常 通常 这些计划执行的进程会占用大量

  • 获取模块中定义的所有常量的值

    我想获取模块中定义的所有常量的值 module Letters A apple freeze B boy freeze end constants给了我常量的名称 Letters constants false gt A B 我如何获得它们

  • sidekiq - 并发 > 50 稳定吗？

    Sidekiq 文档 https github com mperham sidekiq wiki Advanced Options concurrency says 不要将并发设置高于 50 我见过稳定性问题 以并发数100为例 好吧 我的

  • pandas 中的 [] 和 [[]] 有什么区别？ [复制]

    这个问题在这里已经有答案了 我对 pandas 中索引列的结果感到困惑 Both db varname and db varname 给我 varname 的列值 然而 看起来有一些细微的差别 因为输出db varname 显示值的类型 第

  • 为什么需要连接来创建PreparedStatements？

    我想使用准备好的语句很多原因 https stackoverflow com questions 687787 how should i sanitize database input in java 但是 我想创建一个如下所示的方法 Th

  • Windows 上的 gVIM：执行缓冲区和带空格的路径

    在 Windows 版 gVim 中 可以通过 命令执行当前缓冲区 但是 不幸的是 缓冲区文件名提供给 cmd exe 时不带引号 因此如果文件路径有空格 gVim 将无法执行它 有没有简单的方法来修复它以便能够从 gVim 中执行 bat

  • 如何创建连续的组号

    我有一个数据框 all data 其中我有一个网站列表 1 到 n 及其分数 例如 site score 1 10 1 11 1 12 4 10 4 11 4 11 8 9 8 8 8 7 我想创建一个列 按数字顺序对站点的每个级别进行编号

  • 在 asp.net/C# 中使用 LinqToSql 对 row_number 进行排序

    我在数据库表中有一组记录 我们称之为组件表 定义为follows http postimage org image 2a20tc8ck 管理员可以使用表的最后一列禁用标志来禁用某些组件 如果某个特定组件被禁用 它不应出现在用户的网格视图中

  • Java 中 Cypher 查询的结果检索速度慢 - Neo4j 2.0

    我的结果检索速度出奇地慢ResourceIterator

  • Google Cloud AI 平台上的 Tensorflow 2

    Google Cloud AI 平台何时支持 Tensorflow 2 有消息吗 根据列表 1 15是最后支持的版本 https cloud google com ml engine docs runtime version list ht

  • 使用git创建一个临时分支名称

    有点相关这个问题 https stackoverflow com questions 15067561 git create temporary integration branch我想在 shell 脚本中使用临时分支 有点类似于 cd

  • 用于解析 Solana NFT 元数据并更新元数据的代码示例

    在 Solana 上 NFT 元数据存储在共享合约代币元数据程序所拥有的账户中 地址为metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s 我需要一个清晰 简洁的代码示例来说明如何使用某些现有库来获取特定

  • 在Python中解析多个xml文件

    我在这里遇到了一个问题 所以我想解析多个具有相同结构的xml文件 我已经能够获取每个文件的所有位置并将它们保存到三个不同的列表中 因为存在三种不同类型的 xml 结构 现在我想创建三个函数 为每个列表 它循环遍历列表并解析我需要的信息 不知

  • 使用命令行参数运行 eclipse

    有什么方法可以配置 eclipse 来运行带有某些命令行参数的程序以进行调试 您需要为 Eclipse 配置命令行参数 在 运行配置 gt 参数 下 Read here http www cs colostate edu helpdocs

  • 从 NSArray 获取不重复的随机对象

    我有一个NSArray有 17 个对象 如下所示 NSArray objArray NSArray alloc initWithObjects 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 nil an

  • 用于对“pre”标记中的 XML 内容进行语法格式的 PHP 代码

    我正在寻找格式化显示在 a 中的 XML 语法的方法pre在我的沙盒网络上标记 如果你知道怎么做 请告诉我 你可以看看超轻 http code google com p hyperlight or GeSHi http qbnz com h

  • g++：错误：无法识别“-std=c++17”（g++ 版本是什么以及如何安装）

    我正在 RHEL 7 5 上工作并尝试编译 uWebSocket 这个例子 https github com uNetworking uWebSockets 代码 我克隆该项目并打开它 当我开始时make在 Makefile 上我收到此错误

  • ember.js 是否存在分页 mixin ？

    我一直在编写自己的分页逻辑 该逻辑类似于 Ember SortableMixin 但支持分页 1 0 之前的版本中是否存在类似的东西 如果这不存在 是否欢迎围绕此特定行为提出拉取请求 我猜测 90 的应用程序都需要简单的分页 排序 并且内置

  • 是否有 CHAR_BIT > 8 的托管 C 实现？

    后续问题this https stackoverflow com a 63909222 1778275 answer 是否有任何托管 C 实现 STDC HOSTED 是 1 其中有CHAR BIT gt 8 如果有 那么是哪些 UPD 修

  • 未捕获的类型错误：无法读取未定义的属性（读取“渲染”）

    我是 React 新手 正在尝试制作一个无头 WordPress 应用程序 当我获取帖子时 我只得到第一个值 我获取帖子并将其保存在状态中 componentDidMount this setState loading true gt ax

热门标签