Reactjs：将元素添加到Json中的数组对象

Question

我刚刚开始使用 reactjs 并处理表单组件（formsy）。我正在尝试将元素添加到现有数组元素，但我无法这样做。以下是我尝试过的以及到目前为止我得到的。

JSON 对象 -

 {
   "details": {
       "someInnerObj": "v3",
       "innerObj": {
           "key1": "",
           "key2": ""
       },
       "ArrayObject": [{
               "type": "sometype",
               "somedesign": {
                   "A": "",
                   "B": "",
                   "C": "",
                   "D": ""
               },
               "somedev": {
                   "a": "",
                   "b": "",
                   "c": "",
                   "d": ""
               }
           }
       ],
       "code": "code",
       "isThis": "true"
   }
}

我想在这里实现的是向 ArrayObject 添加和元素，如下所示

"ArrayObject": [{
               "type": "sometype",
               "somedesign": {
                   "A": "",
                   "B": "",
                   "C": "",
                   "D": ""
               },
               "somedev": {
                   "a": "",
                   "b": "",
                   "c": "",
                   "d": ""
               }
           },
           {
               "type": "sometype1",
               "somedesing1": {
                   "A1": "",
                   "B1": "",
                   "C1": "",
                   "D1": ""
               },
               "somedev1": {
                   "a1": "",
                   "b1": "",
                   "c1": "",
                   "d1": ""
               }
           }
       ]

我使用 json 对象的字段值作为“details.ArrayObject[1]”放置新元素。但它不是添加新元素，而是创建如下所示的新键并删除现有的 -

 "ArrayObject": {
            "[1]": {
                   "type": "sometype1",
                   "somedesing1": {
                       "A1": "",
                       "B1": "",
                       "C1": "",
                       "D1": ""
                   },
                   "somedev1": {
                       "a1": "",
                       "b1": "",
                       "c1": "",
                       "d1": ""
                   }
               }
        }

有人可以帮忙吗？

谢谢。

原文由 Bruce_Wayne 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 spread operator syntax 就像

     const data = {
       "details": {
           "someInnerObj": "v3",
           "innerObj": {
               "key1": "",
               "key2": ""
           },
           "ArrayObject": [{
                   "type": "sometype",
                   "somedesign": {
                       "A": "",
                       "B": "",
                       "C": "",
                       "D": ""
                   },
                   "somedev": {
                       "a": "",
                       "b": "",
                       "c": "",
                       "d": ""
                   }
               }
           ],
           "code": "code",
           "isThis": "true"
       }
    }

    const newData = {
                   "type": "sometype1",
                   "somedesing1": {
                       "A1": "",
                       "B1": "",
                       "C1": "",
                       "D1": ""
                   },
                   "somedev1": {
                       "a1": "",
                       "b1": "",
                       "c1": "",
                       "d1": ""
                   }
               }


    const res = {
        ...data,
        details: {
            ...data.details,
            ArrayObject: [
              ...data.details.ArrayObject,
              newData
            ]
        }
    }

    console.log(res);

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你需要做的是

添加到数组

var newItem1 = {
               "type": "sometype1",
               "somedesign": {
                   "A": "a1",
                   "B": "b1",
                   "C": "c1",
                   "D": "d1"
               },
               "somedev": {
                   "a": "aa1",
                   "b": "bb1",
                   "c": "cc1",
                   "d": "dd1"
               }
           }
var newItem2 = {
               "type": "sometype2",
               "somedesign": {
                   "A": "a2",
                   "B": "b2",
                   "C": "c2",
                   "D": "d2"
               },
               "somedev": {
                   "a": "aa2",
                   "b": "bb2",
                   "c": "cc2",
                   "d": "dd2"
               }
           }

 var data =
    {
       "details": {
           "someInnerObj": "v3",
           "innerObj": {
               "key1": "",
               "key2": ""
           },
           "ArrayObject": [newItem1,newItem2
           ],
           "code": "code",
           "isThis": "true"
       }
    }

原文由 Mavil 发布，翻译遵循 CC BY-SA 3.0 许可协议