类型错误:无法添加属性数量，对象不可扩展 [英] TypeError: Cannot add property Quantity, object is not extensible

问题描述

我收到此错误 -
无法在Files.jsx中添加属性Quantity，对象不可扩展

itemsInCart 对象数组 是在 App.jsx 中定义的，并在其他 jsx 组件中填充，我用控制台检查过.

App.jsx

const ItemsCartWithLocalStorage = (userItems) =>{const itemsInCart = useRef(JSON.parse(localStorage.getItem(userItems)) ||新数组())；useEffect(() => {console.log('localStorage setItem');localStorage.setItem(userItems, JSON.stringify(itemsInCart));}, [itemsInCart]);返回 [itemsInCart];};功能应用(){const itemsInCart = useRef(ItemsCartWithLocalStorage('itemsQuantityString'));返回 (<文件 itemsInCart={itemsInCart}/>)}

文件.jsx

const Files= ({ itemsInCart }) =>{const array = [...itemsInCart.current];for (let i = 0; i < array.length; i++) {数组[i]['数量'] = 1;类型错误:无法添加属性数量，对象不可扩展"；

我该如何解决这个错误?

解决方案

您必须设置 Object.preventExtensions() 或您使用的任何库都为您做同样的事情.在此调用之后，您无法向在调用中作为参数传递的对象添加新属性，在您的情况下，您可能添加了 "Quantity" 字段，但它不在原始对象.

<块引用>

Object.preventExtensions() 方法可防止向对象添加新属性(即防止将来扩展对象).来源

<块引用>

JavaScript 异常无法定义属性x":obj"不可扩展"当 Object.preventExtensions() 将对象标记为不再可扩展时发生，因此它永远不会拥有超出其标记为不可扩展时的属性.来源

<块引用>

在严格模式中，尝试添加不可扩展对象的新属性会引发 TypeError.在草率模式下，添加x"属性被默默地忽略.来源

下面是复制相同的代码.

'use strict';const itemsInCart = {current:[{a:"a"},{a:"b"}]};Object.preventExtensions(itemsInCart.current[1]);const array = [...itemsInCart.current];数组[1]["q"] = 1console.log(itemsInCart.current)

---

或者您可能试图通过添加键 Quantity 来更新像 String 这样的不可变对象.在 strict 模式下这是不可能的，我们得到 TypeError 而在 Sloppy 模式下它只是被忽略了.

'use strict';const str = "abc";str["数量"] = 1;

I'm getting this error -
Cannot add property Quantity, object is not extensible in Files.jsx

itemsInCart array of objects is defined at the App.jsx and getting filled in other jsx component, I checked with console.

App.jsx

const ItemsCartWithLocalStorage = (userItems) => {
  const itemsInCart = useRef(
    JSON.parse(localStorage.getItem(userItems)) || new Array());
 

  useEffect(() => {
    console.log('localStorage setItem');
    localStorage.setItem(userItems, JSON.stringify(itemsInCart));
  }, [itemsInCart]);

  return [itemsInCart];

};
function App() {

const itemsInCart = useRef(ItemsCartWithLocalStorage('itemsQuantityString'));
return (
      <Files itemsInCart={itemsInCart} />
    )
   }

Files.jsx

const Files= ({ itemsInCart }) => {

 const array = [...itemsInCart.current]; 
 for (let i = 0; i < array.length; i++) {
 array[i]['Quantity'] = 1;  "TypeError: Cannot add property Quantity, object is not extensible"

How can I fix this error ?

解决方案

You must have set Object.preventExtensions() or any library you use is doing the same for you. After this call, you can't add new properties to the object passed as an argument in the call, and in your case, you might be adding the "Quantity" field and it was not in the origin object.

The Object.preventExtensions() method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object). Source

The JavaScript exception "can't define property "x": "obj" is not extensible" occurs when Object.preventExtensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. Source

In strict mode, attempting to add new properties to a non-extensible object throws a TypeError. In sloppy mode, the addition of the "x" property is silently ignored. Source

Below is the code for replicating the same.

'use strict';

const itemsInCart = {current:[{a:"a"},{a:"b"}]};
Object.preventExtensions(itemsInCart.current[1]);
const array = [...itemsInCart.current];
array[1]["q"] = 1
console.log(itemsInCart.current)

---

Or you might be trying to update an immutable object like String by adding the key Quantity. It's not possible in strict mode and we get TypeError while in Sloppy mode it's just ignored.

'use strict';

const str = "abc";

str["Quantity"] = 1;

这篇关于类型错误:无法添加属性数量，对象不可扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！