类型错误：无法添加属性数量，对象不可扩展

Question

我收到此错误 -
Files.jsx 中的

Cannot add property Quantity, object is not extensible

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

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"

如何修复此错误？

Answer 1

您必须设置

Object.preventExtensions()

，否则您使用的任何库都会为您做同样的事情。在此调用之后，您无法向在调用中作为参数传递的对象添加新属性，在您的情况下，您可能会添加

"Quantity"

字段，但它不在原始对象中。

Object.preventExtensions()

方法可以防止将新属性添加到对象中（即防止将来对该对象进行扩展）。 来源

当

Object.preventExtensions()

将对象标记为不再可扩展时，会发生 JavaScript 异常“无法定义属性“x”：“obj”不可扩展”，以便该对象永远不会拥有超出其当时所拥有的属性被标记为不可扩展。 来源

在严格模式中，尝试向不可扩展对象添加新属性会引发类型错误。在草率模式下，“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

来更新像

Quantity

这样的不可变对象。在

strict

模式下这是不可能的，我们会得到

TypeError

，而在 Sloppy 模式下它会被忽略。

'use strict';

const str = "abc";

str["Quantity"] = 1;