Javascript 如何在React中制作我的组件的深度副本？

我有一个数据文件，该文件应具有以下结构：

let data={
    color:"#bf3636",
    count:2,
    inputs:{
             1:{value:value,type:type}
             2:{value:value,type:type}
             3:{value:value,type:type}
             etc
           }
}

我试图找出如何创建这样一个结构，但没有成功。以下是最后的选项之一：

export  const mainReducer=(state=data,action)=>{
    switch (action.type) {
        case "color": {
            return {...state,color:action.color}
        }
        case "count": {
            return {...state,count:action.count}
        }
        case "inputs" :{
            return (action.typeOFInput==="radio")?{...state,inputs:{[action.i]:{value:(state.inputs.[action.i])?state.inputs.[action.i].value:"", type:action.typeOFInput}}}
                :{...state,inputs:{[action.i]:{value:action.value, type:(state.inputs.[action.i])?state.inputs.[action.i].type:""}}}

        }

---

我应该如何修复以创建给定的结构？

您可以尝试查找不可变的JS，它可以帮助您避免传播数据的混乱，并且可以直接使用SETIN和GETIN进行数据操作。

    case "inputs" :{
        let newObj = JSON.parse(JSON.stringify(state));
        (action.typeOFInput==="radio")?newObj.inputs.[action.i]={value:(newObj.inputs.[action.i])?newObj.inputs.[action.i].value:"", type:action.typeOFInput}
        :newObj.inputs.[action.i]={value:action.value, type:(newObj.inputs.[action.i])?newObj.inputs.[action.i].type:""}
        return newObj

    }