[英]Uncaught TypeError: Cannot assign to read only property of object '#<Object>'
对于我目前正在处理的代码，我有一个非常复杂的数组，里面装满了对象。 本页的重点是一次更改数组中一个 object 的一个属性，因此，需要更新整个数组以执行该更改。 该数组被初始化为...
const [allDevices, setAllDevices] = useState(initialDeviceNames)
其中 intialDeviceNames 要么是从查询中获取的填充 object，要么是空数组（如果没有匹配的实例）。 看起来像这样...
请注意，空的 object（如果没有找到具有匹配日期值的值）会将每个数字属性设置为{id: null, name: "No Driver Selected"}
0:
0: {id: 'dfebc7ce-ea4b-48d4-9fd9-7c2d02572e40', name: 'DANIEL STITT', type: 'Vehicle'}
1: {id: '64303dc1-0ba6-43bb-a25a-9885f9e8f2e3', name: 'KENNETH WILLIFORD', type: 'Vehicle'}
2: {id: '1a778957-b679-401b-972d-aeb32f84e667', name: 'JASON PITSNOGLE', type: 'Vehicle'}
3: {id: '1fcc9d60-fc6f-4e34-b5ab-c64d5ea8778a', name: 'VIRGINIA SHADE', type: 'Vehicle'}
4: {id: null, name: 'No Driver Assigned'}
5: {id: null, name: 'No Driver Assigned'}
6: {id: null, name: 'No Driver Assigned'}
amount: 6
name: "Vehicle"
remaining_drivers: (60) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
[[Prototype]]: Object
1:
0: {id: '1a778957-b679-401b-972d-aeb32f84e667', name: 'JASON PITSNOGLE', type: 'iPad'}
1: {id: 'dfebc7ce-ea4b-48d4-9fd9-7c2d02572e40', name: 'DANIEL STITT', type: 'iPad'}
2: {id: '1fcc9d60-fc6f-4e34-b5ab-c64d5ea8778a', name: 'VIRGINIA SHADE', type: 'iPad'}
3: {id: '203726da-dba7-4f74-9d86-919d6a02a282', name: 'DONNA HAGGERTY', type: 'iPad'}
4: {id: null, name: 'No Driver Assigned'}
5: {id: null, name: 'No Driver Assigned'}
6: {id: null, name: 'No Driver Assigned'}
7: {id: null, name: 'No Driver Assigned'}
8: {id: null, name: 'No Driver Assigned'}
9: {id: null, name: 'No Driver Assigned'}
10: {id: null, name: 'No Driver Assigned'}
amount: 10
name: "iPad"
remaining_drivers: (60) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
[[Prototype]]: Object
所以一次更新这个显然很复杂。 我必须在数组中找到正确的 object，然后在该 object 中找到正确的数字属性，更改它，然后获取整个 state 进行更新。 在我添加一些预填充功能之前，我为此使用的代码一直有效。 更新这些单个属性中的任何一个的代码将在下面显示...
const handleDriverSelection = (driver, index, superIndex, deviceObj) => {
// If driver is the same
if (allDevices[superIndex][index].name == `${driver.firstname} ${driver.lastname}`){
}
// If active driver is empty
else if (allDevices[superIndex][index].name == "No Driver Assigned" || allDevices[superIndex][index] == 'undefined'){
console.log(allDevices)
let newArray = [...allDevices]
// The specific device drop selected will be set equal the the driver clicked
newArray[superIndex][index] = {
name: `${driver.firstname} ${driver.lastname}`,
id: driver.id,
type: deviceObj.name
}
// This removes the driver from the list of remaining driver
newArray[superIndex].remaining_drivers = newArray[superIndex].remaining_drivers.filter( (remDriver) => {
if (driver != remDriver){
return remDriver
}
})
// This sets the state
setAllDevices(newArray)
}
// if active driver exists but is NOT the one inputted
else if (allDevices[superIndex][index].name != "No Driver Assigned" ){
console.log(allDevices)
let newArray = [...allDevices]
// This finds the driver that was previously selected and adds him/her back to the remaining list
// For each driver...
user.drivers.forEach( (dspDriver) => {
// if the driver iterated == the driver that was previously selected
if (allDevices[superIndex][index].name == `${dspDriver.firstname} ${dspDriver.lastname}`){
// Adds the driver to remaining drivers
newArray[superIndex].remaining_drivers = [...newArray[superIndex].remaining_drivers, dspDriver]
// Sets the current drop state to the driver selected
newArray[superIndex][index] = {
name: `${driver.firstname} ${driver.lastname}`,
id: driver.id,
type: deviceObj.name
}
// Removes the driver selected from the list of remaining drivers
newArray[superIndex].remaining_drivers = newArray[superIndex].remaining_drivers.filter( (remDriver, index) => {
if (driver != remDriver){
return remDriver
}
})
setAllDevices(newArray)
}
})
}
}
这是我感到非常困惑的地方——通过这条线
let newArray = [...allDevices]
我认为 newArray 创建的数组与allDevices的内容完全相同。 allDevices ，因为它是本地 state，所以是只读的。 我明白这一点。 我也明白，如果我写了let newArray = allDevices ，那么newArray也将是只读的，因为它不是一个新数组，而只是一个指向allDevices值的不同变量。 因此，我不知道为什么这个 ISNT 有效，因为newArray根本不应该是只读的。 我添加的代码有大量复杂的 useEffects 来处理查询、修改和刷新，所以我看不出它会如何影响我上面显示的代码，特别是因为newArray除了这段代码外不存在。
如果我更进一步创建一个新的相同数组，将它从原来的只读数组进一步扩展，它就起作用了。 这意味着我改变了
let newArray = [...allDevices]
到
let newArray = []
allDevices.forEach( (device, index) => {
newArray[index] = {...device}
})
似乎有点多余，但我想问题是即使我创建了包含对象的数组的读写副本，我也没有明确创建每个 object 的读写版本，其中，作为初始数组的一部分，也必须是只读的
未捕获的TypeError：无法分配为只读对象'＃的属性'background' <Object> “
[英]Uncaught TypeError: Cannot assign to read only property 'background' of object '#<Object>'
未捕获的TypeError：无法分配给对象'＃<Object>'的只读属性'exports'
[英]Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
未捕获的类型错误：无法分配给对象“[对象数组]”的只读属性“1”
[英]Uncaught TypeError: Cannot assign to read only property '1' of object '[object Array]'
未捕获的类型错误：无法分配给 object 的只读属性 'tagName' '#<htmlimageelement> '</htmlimageelement>
[英]Uncaught TypeError: Cannot assign to read only property 'tagName' of object '#<HTMLImageElement>'
未捕获的TypeError：无法分配为仅读取对象'的属性'exports'
[英]Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘
未捕获的类型错误：无法分配给 object '[object Array]' js 的只读属性 '0'
[英]Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]' js
CustomElements.js：596未捕获的TypeError：无法分配为只读对象'＃的属性'customElements' <Window> “
[英]CustomElements.js:596Uncaught TypeError: Cannot assign to read only property 'customElements' of object '#<Window>'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.