Question

未捕获的类型错误：无法分配给对象‘[object Array]’的只读属性‘1’

2022-12-16

1697

javascript reactjs arrays

我有一个对象，它的 props 中有一个数组。我试图更改此数组内（对象内部）项目的值。此对象来自 Redux。

const [product, setProduct] = useState(useSelector(selectProducts).find((item) => item.id === id))
console.log(product)
//  { name: "",
//    imageUrls: ["https://blabla","https://blabla2","","",""],
//    quantity: "" }

我可以使用 setProduct 方法设置产品对象的任何 prop 没有任何问题 ，也可以使用 setState 更新整个数组。我的意思是我可以毫无问题地使用它们：

setProduct({...product, name: "BOOK"})

或

setProduct({...product, imageUrls: ["SHIT", "GLASS"]})

但我无法设置 imageUrls 数组内的单个 imageUrl 值的状态。出现标题中写的错误。我试过了

setProduct((prevState) => {
  let copy = {...prevState}
  copy.imageUrls[i] = ""
  return copy
 })

然后出现错误： Uncaught TypeError: Cannotassign to read only property '1' of object '[object Array]' 我也尝试添加

Object.defineProperties(product, {imageUrls: {configurable: true, writable: true}})

然后，再次出现错误， object is not redefinable.

我认为我遇到这个问题不是因为逻辑错误，只是因为我无法使用正确的语法。你能帮忙吗？

Answer 1

只需将您的 setProduct 方法视为以“非变异”方式更新 product 的一种方式。希望这会导致将值传递给实现您所追求的函数。因此，您已经对非数组项执行了此操作（例如 setProduct({...product, name: "BOOK"}) ）。也可以使用与以下类似的代码来更改数组项中的索引项：

setProduct({
  ...product,
  imageUrls: product.imageUrls.map((item, index) =>
    index === 2 ? "newValue" : item
  ),
});

其中，上述代码更改了 imageUrls 数组中第二个索引项的值。示例代码中的一个问题是您使用了 i ，但它似乎没有定义。如果在调用 setProduct 的上下文中定义 i ，则可以更改上述示例代码，以便将 2 替换为 i

Answer 2

const selectProducts  = [
{name:"",imageUrls:["https://blabla","https://blabla2","","",""], quantity:""},
{name:"",imageUrls:["https://blabla3","https://blabla4","","",""], quantity:""}
]
const persistedProducts = selectProducts.map((product)=>{
  const {imageUrls, ...productWithoutImageUrls } = product;
 
  
  return {
    ...productWithoutImageUrls,
    imageUrls: imageUrls.map((imageUrl)=>"")
  }
})

console.log(persistedProducts)

Answer 3

您想尝试一下吗？

const productState = useSelector(selectProducts);
const [product, setProduct] = useState({ ...productState });

然后您可以在任何想要更新产品的地方使用 setProduct。