前端修改Mongoose只读数据报错：TypeError: contracts is read-only

前端从Mongoose接收的数据通常为只读文档，今日遇到错误：TypeError: "contracts" is read-only，尝试过赋值新变量、map遍历、扩展运算符复制数据等方法，均无法解决。

使用RTK Query获取数据（此前无此类问题），推测数据仍被识别为Mongoose原始只读文档，寻求解决思路。

控制台打印的输入数据 #

Array [ {…}, {…} ]

0: Object { _id: "6205a8313fe12d6b4ec354c4", fullName: "Johnny Cochrane", contracts: {…} }
_id: "6205a8313fe12d6b4ec354c4"
contracts: Object { type: "Quarterly", hours: 120 }
fullName: "Johnny Cochrane"
<prototype>: Object { … }

1: Object { _id: "6217c1b73fe12d6b4ec3550e", fullName: "Sheila Thompson", contracts: {…} }

触发错误的字段赋值代码 #

useEffect(() => {
    if(data) {

        let dataArr = [...data]
    
        const contractsByMonth = (type, hours) => {
            if (type === "Quarterly") {
            let monthHours = hours / 3
            return +(Math.round(monthHours + "e+2")  + "e-2");
        }     
        }

        dataArr.map(i => {
            let monthly = contractsByMonth(i.contracts.type, i.contracts.hours)
            i.contracts = {type: i.contracts.type, monthHours: monthly, total: i.contracts.hours  }

...
}, [data])

补充组件代码 #

const HoursGraph = () => {
 const {id} = useAuth()
 const userId = id

...

const  [pullData, {data}]  = useGetSnapshotMutation({userId, isStart, isEnd}) 
// RTK Query mutation which pulls the data- its an aggregation and I pass criteria through the body, but I've done this plenty without issue

...
useEffect(() => {
 ...
if (index === 0) {
            start = new Date(end).setDate(1)
        } else if (index === 1) {
            const startMth = currentMth - 1
            console.log(currentMth, startMth)
            start = new Date(new Date(new Date(end).setMonth(startMth, 1)).setHours(0, 0, 0)).toISOString()
        } else if (index === 2) {
            const startMth = currentMth -2
            console.log(currentMth, startMth)
            start = new Date(new Date(new Date(end).setMonth(startMth, 1)).setHours(0, 0, 0)).toISOString()
        }
        setIsStart(start)
        setIsEnd(end)
}, [])

 useEffect(() => {
        if(isStart && isEnd && userId) {
            pullData({userId, isStart, isEnd})
        }
    }, [isStart, isEnd, userId])
    
    console.log("snapshot data: ", data) //this logs the data referenced above

 useEffect(() => {
        if(data) {

            let dataArr = [...data]
        
            const contractsByMonth = (type, hours) => {
                if (type === "Quarterly") {
                let monthHours = hours / 3
                return +(Math.round(monthHours + "e+2")  + "e-2");
            }     
            }

            dataArr.map(i => {
                let monthly = contractsByMonth(i.contracts.type, i.contracts.hours)
                i.contracts = {type: i.contracts.type, monthHours: monthly, total: i.contracts.hours  } //This throws the error

                let colors
                let sum

                let qtrSum = i.hours.reduce((acc, curr) => acc.count + curr.count)
                console.log("sum: ", qtrSum)
                const color= ['#73E078', '#26A69A', '#26C6DA', '#29B6F6']
                
                i.hours = i.hours.map(x => {return ( {date: x.date, count: x.count, month: monthly } )})
                i[colors] = color
                i[sum] = qtrSum
                })
                console.log(data)
...
}, [data])

内容的提问来源于stack exchange，提问作者Jowz