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

我在React -TypeError中得到这个错误:无法在布尔值'true‘上创建属性'completed’

在React中,当你得到一个错误"TypeError: Cannot create property 'completed' on boolean 'true'"时,这通常意味着你在尝试在一个布尔值上创建一个属性。这个错误通常发生在你试图在一个布尔值上使用对象的属性或方法时。

要解决这个错误,你需要检查你的代码并确定在哪里出现了问题。以下是一些可能导致这个错误的常见情况和解决方法:

  1. 检查你的变量类型:确保你正在操作的变量是一个对象,而不是一个布尔值。你可以使用typeof运算符来检查变量的类型。如果变量是布尔值,你需要找到为什么它被错误地赋予了布尔值。
  2. 检查你的变量赋值:如果你在代码中使用了类似于true.completed = true的语句,那么这就是错误的原因。布尔值是不可变的,你不能在其上创建属性。确保你只在对象上使用属性和方法。
  3. 检查你的条件语句:如果你在一个条件语句中使用了布尔值,并且试图在其上创建属性,那么你需要检查你的条件逻辑。确保你的条件语句正确地处理对象和布尔值。

总之,当你在React中得到"TypeError: Cannot create property 'completed' on boolean 'true'"错误时,你需要仔细检查你的代码,确保你正确地处理了布尔值和对象,并避免在布尔值上创建属性。

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

相关·内容

React Memo不是你优化的第一选择

这将有助于确保元组的内容创建后不可更改。...解法 2:内容提升 当一部分state高开销组件树的上层代码中使用时「下放State」就无法奏效了。举个例子,如果我们将color放到父元素div。...表面上,总是传递相同的、稳定的标签作为children。实际并不是。JSX只是React.createElement的语法糖,它会在「每次渲染时创建一个新的对象」。...我们无法将状态下放到表格,也无法以不同的方式组合这些组件。似乎对组件进行memo处理是我们唯一的选择。 其实在twitter已经有人给出了解决方案。...React团队也曾暗示他们正在开发一个名为React Forget的编译器,据说将自动为我们进行记忆化。有了这个工具,我们可以获得React.memo的性能优化,同时减少错误的发生机会。

33930

如何搭建前端异常监控系统

什么是异常 是指用户使用应用时,无法得到预期的结果。不同的异常带来的后果程度不同,轻则引起用户使用不悦,重则导致产品无法使用,从而使用户丧失对产品的认可。...: 事件处理程序 异步代码(例如 setTimeout 或 requestAnimationFrame 回调) 服务器端渲染 错误边界本身(而不是其子级)引发的错误 iframe 由于浏览器设置的“...同源策略”,无法非常优雅的处理 iframe 异常,除了基本属性(例如其宽度和高度)之外,无法从 iframe 获得很多信息。...2、动态创建 img 标签 如果异常数据量大,导致服务器负载高,调整发送频率(可以考虑把异常信息存储客户端,设定时间阀值,进行上报)或设置采集率(采集率应该通过实际情况来设定,随机数,或者某些用户特征都是不错的选择...React MDN Vue 博客 欢迎关注的博客

1.2K00

ES6系列十四:Proxy

比如,上面代码,配置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性得到35。...上面代码表示,如果访问目标对象不存在的属性,会抛出一个错误。...deleteProperty() deleteProperty方法用于拦截delete操作,如果这个方法抛出错误或者返回false,当前属性无法被delete命令删除。...注意,该方法只能返回布尔值,否则返回值会被自动转为布尔值这个方法有一个强限制,它的返回值必须与目标对象的isExtensible属性保持一致,否则就会抛出错误。...上面代码,当执行revoke函数之后,再访问Proxy实例,就会抛出一个错误

1.3K30

如何搭建前端异常监控系统

原文地址:https://segmentfault.com/a/1190000023096077 原文作者:发声的沉默者 什么是异常 是指用户使用应用时,无法得到预期的结果。...这些error事件不会向上冒泡到window,不过(至少Firefox)能被单一的window.addEventListener捕获。...: 事件处理程序 异步代码(例如setTimeout或requestAnimationFrame回调) 服务器端渲染 错误边界本身(而不是其子级)引发的错误 iframe 由于浏览器设置的“同源策略...”,无法非常优雅的处理iframe异常,除了基本属性(例如其宽度和高度)之外,无法从iFrame获得很多信息。...需要上报哪些信息 错误id 用户id 用户名 用户IP 设备 错误信息 游览器 系统版本 应用版本 机型 时间戳 异常级别(error、warning、info) 异常上报 1、Ajax发送数据 2、动态创建

1.7K20

RxDB 异常机制

SyntaxError —— 创建一个error实例,表示错误的原因:eval()解析代码的过程中发生的语法错误。...TypeError —— 创建一个error实例,表示错误的原因:变量或参数不属于有效类型。...关于序列化,有下面五点注意事项: 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串布尔值、数字、字符串的包装对象序列化过程中会自动转换成对应的原始值。...undefined、任意的函数以及 symbol 值,序列化过程中会被忽略(出现在非数组对象的属性时)或者被转换成 null(出现在数组时)。...所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数强制指定包含了它们。 不可枚举的属性会被忽略。

1.2K10

4、React组件之性能优化

(nextProp,nextState) shouldComponentUpdate函数render函数之前调用,决定“什么时候不需要从新渲染”; 即返回一个布尔值,决定更新是否进行下去,默认返回true...== this.props.text) } 其中nextProps为此次更新传入的props,对于这个组件,影响渲染内容的prop只有completed和text, 只要确保这两个prop没有变化,...const footStyle = {color: "red"};//确保这个初始化只执行一次,不要放在render函数 使用‘单例模式...不过,这些生命周期函数是针对一个 特定的React组件函数,一个应用,从上而下有很多React组件组合起来,它们之间的渲染过程要更加复杂。...组件便会经历“卸载”的生命周期; 也就是说,对于Virtual DOM树这是一个“更新”过程,但是却可能引发这个树结构某些组件的“装载”和“卸载”过程 如: 更新前 <Todos

58710

大话 JavaScript(Speaking JavaScript):第六章到第十章

foo: delete foo 严格模式下,当你尝试删除未经限定的标识符时,你会得到一个语法错误。...严格模式下被禁止的特性 严格模式下,还有两个 JavaScript 特性是被禁止的: 不再允许使用with语句(参见The with Statement)。在编译时(加载代码时)会得到语法错误。...例如: > 010 === 8 true 严格模式下,如果你使用这种文字类型,你会得到一个语法错误: > function f() { 'use strict'; return 010 }...否则,抛出TypeError(表示无法将input转换为原始值)。 如果PreferredType是String,则步骤 2 和 3 会交换。...虽然这是一种简洁的写法,但它会让初学者感到困惑,而专家也无法确定它是否是打字错误。因此,如果你想检查x是否有值,请使用标准的真值检查(真值和假值中介绍): if (x) ...

26010

React 的受控组件和非受控组件

React 应用之所以需要受控组件和非受控组件,起因于、 和 这类特定的 DOM 元素默认 DOM 层维持状态(用户输入)。...比如,最近的一个应用需要创建一个可嵌套的 Collapsible 折叠组件,支持两种操作模式:某些情况下需要使其被外界可控(当应用的其他区域发生用户交互时扩展开),其他时候它能简单的自己管理状态就可以了...React 的 Inputs 对于 React 的 Inputs,是这样工作的: 要创建一个非受控 input,要设置一个 defaultValue 属性。...因此,如果 onChange() 没被正确的处理,则 input 实际就成了只读;因为 input 总是靠着 value 属性来渲染其值的,用户也就无法改变 input 的值了。...一般模式 还好,利用这种行为创建组件不算麻烦。关键在于创建一个组件接口,可以两种可能的属性配置中选择其一。 要创建一个非受控组件,就将想控制的属性定义成 defaultXXX。

2.7K20

前端异常的捕获与处理

异常处理程序设计的重要性是毋庸置疑的。任何有影响力的 Web 应用程序都需要一套完善的异常处理机制,但实际,通常只有服务端团队会在异常处理机制投入较大精力。...此时 catch 块会接收到一个包含错误信息的对象,这个对象包含的信息因浏览器而异,但共同的是有一个保存着错误信息的 message 属性。...接下来让具体分析几种异常场景及其处理方案。 四、异常分析 1. JS 代码错误 下面为司内部错误监控平台一次日常报错的调用堆栈截图: 错误还是比较明显的,this 指向导致的问题。...TypeError 类型 JavaScript 中会经常遇到,变量中保存着意外类型时,或者访问不存在的方法时,都会导致这种错误。...错误边界是 React 组件,它“捕获子组件树的任何地方的 JavaScript 错误”,同时还记录错误并显示回退用户界面。

3.3K30

2022秋招前端面试题(九)(附答案)

最后一个阶段是时间冒泡阶段,可以在这个阶段对事件做出响应。虽然捕获阶段规范规定不允许响应事件,但是实际还是会执行,所以有两次机会获取到目标对象。<!...1 + true = 21 + false = 1转换为布尔值for 第二个whileif三元表达式|| (逻辑或) && (逻辑与)左边的操作数符号不能被转换为数字能被转换为布尔值(都是 true)...Person.prototype 指向的对象,这个机制就被称为原型链继承方法定义原型属性定义构造函数上首先要说一下 JS 原型和实例的关系:每个构造函数 (constructor)都有一个原型对象...JS 属性的查找:当我们试图引用实例对象的某个属性时,是按照这样的方式去查找的,首先查找实例对象是否有这个属性,如果没有找到,就去构造这个实例对象的构造函数的 prototype 所指向的对象上去查找...new操作符的实现步骤如下:创建一个对象将构造函数的作用域赋给新对象(也就是将对象的proto属性指向构造函数的prototype属性)指向构造函数的代码,构造函数的this指向该对象(也就是为这个对象添加属性和方法

2.6K30

Redux(一):基本概念

React组件关系,组件状态由自己管理,父子组件通过props传递;兄弟组件那么就需要一个共同的父组件作中转;如果涉及层级比较深的话一层一层传递会非常麻烦。...:true },{ text:"keep all state in a single tree", completed:true }] } 这个对象包含2...3、创建一个store redux应该只有一个store,单一数据源,这一点很重要。redux向外暴露了一个createStore方法用来创建store。...例子,无论是对象还是数组,并没有直接去修改属性会增加元素,返回的都是一个新的对象或数组,这一点很重要,因为js对象是按地址引用的,直接修改属性或push一个元素,引用地址并没有发生变化,这会导致出现一些难以控制的情况...事实证明,会执行2次,但由于第一次的组件销毁了,所以一个已经销毁的组件执行setState()方法必然是不合理的,此时react会抛出一个警告: Can’t perform a React state

1.3K10

异常处理

# 用户输入不完整 num = input(">>: ") int(num) #无法完成计算 res1 = 1/0 res2 = 1+'str' 逻辑错误 二丶异常种类   Python不同的异常可以用不同的类型...(Python中统一了类与类型,类型即类)去标识,不同的类对象标识不同的异常,一个异常标识一种错误 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x IOError...输入/输出异常;基本无法打开文件 ImportError 无法引入模块或包;基本是路径问题或名称错误 IndentationError 语法错误(的子类) ;代码没有正确对齐 IndexError...,写错了) TypeError 传入对象类型与要求的不符合 UnboundLocalError 试图访问一个还未被设置的局部变量,基本是由于另有一个同名的全局变量,导致你以为正在访问它 ValueError...python解释器检测到错误,触发异常(也允许程序员自己触发异常)     程序员编写特定的代码,专门用来捕捉这个异常(这段代码与程序逻辑无关,与异常处理有关)如果捕捉成功则进入另外一个处理分支,执行你为其定制的逻辑

1.1K40

如何在React写出更好的代码

例如,我们需要告诉React,userIsLoaded总是一个布尔值。 确保你每一个使用props的组件都设置了propTypes和defaultProps,将有很大的帮助。...纯组件 通常情况下,当一个组件得到一个新的props时,React会重新渲染这个组件。但有时,一个组件得到的新props并没有真正改变,但React仍然会触发重新渲染。...这一点的好处是: 不需要写一个单独的函数。 不需要在的渲染函数再写一个 "if "语句。 不需要在组件创建一个 "链接 "到其他地方。 编写内联条件语句是非常简单的。...---- 使用代码片段库 打开一个代码编辑器(使用VS Code),并创建一个.js文件。 在这个文件,当你输入rc时,你会看到类似这样的东西。...点击进入,你会立即得到下面这段代码: 这些代码片段的好处是,它们不仅能帮助你潜在地保存错误,而且还能帮助你识别最新的语法。 有许多不同的代码片段库,可以安装在你的代码编辑器

2.5K10

快速学习ES6语法,用最快的速度入门

} 而在ES6我们有了let,使用let在内定义的变量在外部环境是无法访问到的,最适合使用let的地方就是for循环了 for (let i = 0; i < 10; i++) { console.log...if (true) { console.log(MAX); // ReferenceError const MAX = 5; } 上面代码常量MAX声明之前就调用,结果报错。...关于顶层对象 我们都知道,ES5全局var定义的变量、function实际都是全局对象window(global)的属性,而ES6为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性...const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" 类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值...// true 上面代码,数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。

65920

字节前端面试题

,「只适用在开发阶段」关于配置方面,webpack配置对象属性通过devServer属性提供,如下:// ....new操作符的实现步骤如下:创建一个对象将构造函数的作用域赋给新对象(也就是将对象的proto属性指向构造函数的prototype属性)指向构造函数的代码,构造函数的this指向该对象(也就是为这个对象添加属性和方法...不过catch方法还有一个作用,就是执行resolve回调函数时,如果出现错误,抛出异常,不会停止运行,而是进入catch方法。...,全局范围内this 指向window对象;函数,this永远指向最后调用他的那个对象;构造函数,this指向new出来的那个新的对象;call、apply、bind的this被强绑定在指定的那个对象...加一个唯一值不影响context属性 let key = Symbol('key') context[key] = this; // context为调用的上下文,this此处为函数,将这个函数作为

1.7K20
领券