出现 TypeError:this.props 在 ReactJs 上未定义

2024-03-21

我正在尝试做教程:https://facebook.github.io/react/docs/tutorial.html https://facebook.github.io/react/docs/tutorial.html

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import styles from './CommentBox.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import $ from 'jquery';

@withStyles(styles)
class CommentBox extends React.Component {

    constructor() {
        super();
        this.state = {data: []};
    }

    loadCommentsFromServer() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        })
    }

    componentDidMount() {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, this.props.pollInterval);
    }

    render() {

        let url="/public/comments.json"

        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm />
            </div>
        );
    }

}

class CommentList extends React.Component {

    render() {

        let data = this.props.data

        var commentNodes = data.map(function (comment) {
          return (
            <Comment author={comment.author}>
              {comment.text}
            </Comment>
          );
        });

        return (
          <div className="commentList">
            {commentNodes}
          </div>
        );
    }
};

class Comment extends React.Component {
    render() {
        return(
            <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            {this.props.children}
          </div>
        );
    }
}

class CommentForm extends React.Component {
  render() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
};

export default CommentBox;

然而,该教程有点过时了,我正在使用带有 ES6 语法的 React 0.14-rc1。我已尽力遵循教程并以 0.14 的方式实现它。能够到达这一点,但现在出现错误:

TypeError: this.props is undefined

无法弄清楚问题所在。知道为什么吗?谢谢


使用时React https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding and ES6 类 https://facebook.github.io/react/docs/reusable-components.html#es6-classesReact 不会自动绑定在类中声明的函数。

因此要么使用this.loadCommentsFromServer.bind(this)或使用箭头函数

loadCommentsFromServer = () => {}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

出现 TypeError:this.props 在 ReactJs 上未定义 的相关文章

  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr
  • 如何让material-ui文本字段中的标签位于右侧?

    我在用着material ui and typescript对于我的 React 项目 rtl 布局 我不知道如何将文本字段的标签放在右侧 找到了更好的方法without外部库 export const theme createTheme
  • npm 脚本:node-sass 不监视部分 sass 文件

    我有这个项目结构 src assets css sass main scss variables scss 我正在尝试编写一个 npm 脚本 该脚本将监视我的所有 scss 文件 包括部分文件 中的更改 然后仅编译我的 main scss
  • 表单未使用 AJAX 提交

    再次更新 如果有人关心的话 我之前发布的解决方案由于某种原因停止工作 我在 ajax 请求中包含了 beforeSend 并将验证表单的 js 部分粘贴到其中 现在就像一个魅力 form on submit function e e pre
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • 如何获取调用函数的“this”值?

    如果我有一个这样的函数 function foo this console log this function bar bar prototype func function foo this var test new bar test f
  • 使用JS将图像的特定背景颜色设置为透明

    我正在使用以下代码来修改图像的透明度 然而 我想做的只是修改图像的背景颜色并将其 alpha 通道设置为 0 而不是整个图像 以下代码将整个图像的 Alpha 透明度设置为 0 var ctx this data getContext 2d
  • 获取键盘事件中的鼠标位置

    我试图在用户按住 Shift 键时出现选择轮 滚轮应以鼠标位置为中心 然而当我测试这个时 pageX and clientX两者在事件对象上都未定义 是否可以通过键盘事件获取鼠标坐标 不 只需跟踪mousemove事件并持续保存当前位置 以
  • 设计 Javascript 前端 <-> C++ 后端通信

    在我最近的将来 我将不得不制作一个具有 C 后端和 Web 前端的系统 要求 目前 我对此了解不多 我认为前端将触发数据传输 而不是后端 所以不需要类似 Comet 的东西 由于在该领域的经验可能很少 我非常感谢您对我所做的设计决策的评论
  • 检查 href 中是否存在 jQuery 中的查询字符串

    我目前有一段 jQuery 用于附加带有一些位置信息的 URL jQuery a attr href function return this href location 123 abc 我的问题是大多数链接都有一个 其中使用上面的 就可以
  • 为什么严格模式下不允许使用八进制数字文字(解决方法是什么?)

    为什么八进制数字文字不允许JavaScript 严格模式 https developer mozilla org en docs Web JavaScript Reference Strict mode 有什么害处呢 use strict
  • 如何在 svelte 中制作搜索过滤器

    我有两个组件在组件树中距离很远 我对如何在两者之间进行通信存有疑问 我有搜索组件 listItems 和商店 商店 svelte
  • 在javascript中定义Date.parse的格式[重复]

    这个问题在这里已经有答案了 我正在使用 Date parse 将字符串转换为 JavaScript 中的日期 但是 如果字符串看起来像 10 11 2016 它会被解释为 2016 年 10 月 11 日 我需要将其解释为 2016 年 1
  • 可选链接在 create-react-app 中不起作用

    In a create react app项目 我正在使用 babel plugin proposal optional chaining在我的 babelrc中 但是 我有这个错误 Module parse failed Unexpect
  • 如何修复 AJAX 在选中复选框时始终触发?

    有时这个 AJAX 会触发 有时不会 让我解释一下 habit js document ready function habit check change function habit this parent siblings habit
  • 条件顺序仅在 init AngularJS 上执行

    如何在视图初始化时仅运行 orderBy 过滤器一次 我不希望我的列表在运行时被重新排序 li li 使用 orderBy 作为控制器中的过滤器 app controller DemoCtrl scope filter function s
  • 如何逐步绘制矢量路径? (拉斐尔.js)

    如何逐步动画化矢量路径 就像它被绘制一样 换句话说 慢慢地逐像素地显示路径 我在用着Rapha l js but如果您的答案不是特定于库的 例如可能有一些通用的编程模式可以完成此类事情 我对矢量动画相当陌生 欢迎 使用直线路径很容易做到 就
  • JS中如何过滤多个字符串? [复制]

    这个问题在这里已经有答案了 我希望能够过滤数组中的多个字符串 类型 例如我想过滤类型meat并输入fruit在下面的数据结构中 我想要实现的是过滤数据对象 const data type meat food hamburger type f
  • React + 路由器 + Google 标签管理器

    我花了一些时间在 Quickcypher com 上开发 MVP 我想开始进行一些分析 它对于跟踪总访问量非常有用 但是当我尝试跟踪使用 React Router 的网站上的不同 URL 时 情况却出问题了 我的方法是这样的 设置一个在某些
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css

随机推荐

  • 如何为邮递员请求生成未来的日期和时间

    name IronMan phone number 555555555 number of guest 10 tables 2 reservation start at 2020 10 15T10 00 00 861873Z reserva
  • 按行组合 pandas 数据帧的有效方法

    我有 14 个数据框 每个数据框有 14 列和超过 250 000 行 数据框具有相同的列标题 我想按行合并数据框 我尝试将数据帧连接到 不断增长的 数据帧 这需要几个小时 本质上 我做了如下 13 次这样的事情 DF pd DataFra
  • 应用“文本溢出:省略号;”到内部 div

    I have a div structure similar to following image 我需要应用 文本溢出 省略号 在较小的窗口中使用此 div 结构中的文本 图 2 但它并没有像我预期的那样适用 这是我的 HTML 代码 h
  • Android 的所选项目选择器不起作用

    我有一个列表视图 我想在其中以自定义方式突出显示所选项目 我正在设置适配器中的每个项目属性getView方法 包括itemView setSelected true 主布局通过以下方式定义列表视图
  • C# 比较两个不同对象的列表[重复]

    这个问题在这里已经有答案了 I saw 比较两个 List 的最快方法 https stackoverflow com questions 12795882 quickest way to compare two list但我很难使其适应我
  • 级联空引用异常检查?

    有没有办法在 C 中进行通用级联空引用检查 我想要实现的是 如果我试图访问一个字符串变量 它是类 C 的一部分 而类 C 又在类 B 中 而类 B 又在 A 中 ABC str 如果我传入 A 我必须检查 A 是否为空 然后检查 B 是否为
  • 使用 smack 库的 GCM NoResponseException:回复超时内未收到响应

    我是 gcm 新手 我尝试使用 Smack API 连接到 GCM 的云连接服务器 XMPP 一开始还好 我的代码 uid 123456789 apiKey A B XMPPTCPConnectionConfiguration Builde
  • 当其中任意 1 个组合框发生更改时,列表框中的所有组合框都会发生变化

    我有一个ListBox在绑定到的表单上ObservableCollection自定义类型 每个项目内都有一个ComboBox绑定到枚举类型 当窗口加载时 所有ComboBoxes 默认为某个值 当我改变SelectedItem对于任何一个
  • 如何设置“git集群”

    我们正在考虑将我们的源代码版本控制系统从 Subversion 更改为 Git 我们正在突破当前设置的限制 并认为使用 git 会更好 我们一直在办公室使用主服务器 并在数据中心运行镜像 镜像配置为代理传入主服务器的提交 这样 两台机器就像
  • 为什么 emacs 中的 vc-git 和 magit 忽略我的 git 配置设置?

    我正在使用 magit 运行 emacs 24 1 1 的官方 Windows 二进制文件 当我提交文件时 日志中显示的用户名和电子邮件将从我的帐户和计算机名称中删除 而不是使用全局 git 配置或此重现的本地设置中设置的值 从 git b
  • 如何向数组添加元素?

    如何向现有数组添加元素 我有数组 Array 0 gt Array user id gt 1 user login gt Saibamen user password gt 4028a0e356acc947fcd2bfshfh3w26gds
  • SDL2 升起窗口而不给予焦点

    我需要在窗口上显示工具提示 我正在使用工具提示创建第二个窗口 并使用 SDL RaiseWindow 将其带到顶部 然而 这样做会导致工具提示窃取焦点 这不是我想要的 有没有办法在不改变焦点的情况下将窗口置于顶部 另外 有没有办法在不改变窗
  • inDither = true Android

    有人可以解释一下设置时到底发生了什么吗抖动 true在 Android 中配置位图的上下文中 在 Developer Android 上可以阅读有关静态变量的信息 Config RGB 565 根据源的配置 此配置可能会产生轻微的视觉伪影
  • 为什么Java的SimpleDateFormat不是线程安全的? [复制]

    这个问题在这里已经有答案了 请用代码示例说明为什么 SimpleDateFormat 不是线程安全的 这堂课有什么问题 是SimpleDateFormat的格式化函数的问题 请给出在课堂上演示此错误的代码 FastDateFormat 是线
  • 如何在PyUsb中绑定/取消绑定USB设备?

    我需要在 python 脚本上打开 关闭多个 USB 设备 我可以使用 PyUsb 绑定和取消绑定 USB 设备吗 我可以使用 shell 命令来做到这一点 关闭电源 echo device nuber gt sys bus usb dri
  • SQLite - 表约束唯一和列约束唯一之间有什么区别?

    关于 SQLite 的问题 在 CREATE TABLE SQL 中 我们可以通过以下任一方式添加 UNIQUE 约束 列约束或表约束 我的问题很简单 他们的工作方式不同吗 我能发现的唯一区别是 在表约束中 可能有多个indexed col
  • 找出 MySQL 在 Mac OS X 上的安装位置

    如何找出 Mac OS X 10 7 9 上 MySQL 的安装位置 我安装了 MAMP 所以我认为它与此安装捆绑在一起 要检查 MAMP 的 MySQL 版本 请在终端中使用以下命令 Applications MAMP Library b
  • DOCX w:t(文本)元素跨越多个 w:r(运行)元素?

    我们编写了一个软件 可以从 Word 文档的内部 XML 文件中处理 XML 并用替换值替换某些代码 有时我们发现此类代码在多次运行之间被破坏 以下是我们有时会遇到的此类情况的示例
  • 为子类添加额外的“方法”

    这是一个概念性问题 旨在了解如何在 C 中完成 OOP 技术 我知道它不实用或不推荐 并且有许多语言可以更好地实现此目的 但我只是看看作为初学者如何完成它到 C 假设我有一个名为的基础对象Thing 它将有一些数据和一些功能 然后我想添加另
  • 出现 TypeError:this.props 在 ReactJs 上未定义

    我正在尝试做教程 https facebook github io react docs tutorial html https facebook github io react docs tutorial html import Reac