时间戳

首页 > 解决方案 > TypeError：无法添加属性数量，对象不可扩展

reactjs - TypeError：无法添加属性数量，对象不可扩展

问题描述

我收到此错误 -
Cannot add property Quantity, object is not extensible在 Files.jsx 中

itemsInCart对象数组在 App.jsx 中定义并填充到其他jsx 组件中，我使用控制台进行了检查。

应用程序.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} />
    )
   }

文件.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"

我该如何解决这个错误？

标签： reactjsreact-hookslocal-storagetypeerror

解决方案

您必须设置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];
array[1]["q"] = 1
console.log(itemsInCart.current)

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

'use strict';

const str = "abc";

str["Quantity"] = 1;

推荐阅读