React-Typescript中如何正确更新复杂JSON的address属性值

我有以下两个JSON数据：

data1 #

{"submitted": [{"id": "123","status": {"code": "unmapped","value": "Unmapped"},"Type": {"code": "I","value": "Institutional"},"Responsibility": {"code": "P","value": "Primary"},"Details": {"payerId": "456","name": "Bla Bla","enabled": false,"address": {}}}],"XyzDetails": {"id": "1","name": "bla","Level": {"code": "S","value": "Secondary"}}}

data2 #

{"unmapped": [{"id": "123","address": {"addressLine1": "P.O. BOX 981106","city": "EL PASO","state": "TX","zip": "79998"}}]}

我需要用data2更新data1里的address属性，但写了下面的代码后，得到的address是对象数组，不是单个JSON对象：

data1 = data1?.map((type) => {
      type.Details.address = data2.unmapped
        ?.filter((item) => item.id === type.id)
        .map((item) => item.address);

      return type;
    }); 

当前结果 #

"address": [{"addressLine1": "P.O. BOX 981106","city": "EL PASO","state": "TX","zip": "79998"}]

期望结果 #

"address":{"addressLine1": "P.O. BOX 981106","city": "EL PASO","state": "TX","zip": "79998"}

请问代码哪里出错？该如何实现需求？

错误点 #

1. 遍历对象而非数组：data1是顶层对象，不是数组，你用.map()直接遍历data1本身是错误的，应该遍历data1.submitted数组。
2. 使用.map()导致数组结果：你在filter()之后调用了.map()，这个方法会返回一个数组，哪怕只匹配到一个元素，最终赋值给address的就是数组类型，不符合预期的单个对象需求。

修正代码 #

// 遍历data1中的submitted数组
data1.submitted = data1.submitted?.map((submittedItem) => {
  // 用find()直接找到data2中id匹配的项，返回单个对象而非数组
  const matchedUnmappedItem = data2.unmapped?.find(item => item.id === submittedItem.id);
  
  // 替换address：找到匹配项就用它的address，否则保留原address
  submittedItem.Details.address = matchedUnmappedItem?.address || submittedItem.Details.address;
  
  return submittedItem;
});

代码说明 #

• 改用.find()替代filter().map()：.find()会直接返回第一个符合条件的元素，不需要处理数组，既满足需求又提升效率。
• 修正遍历目标：明确遍历data1.submitted数组，这才是包含需要更新项的数组。
• 兜底处理：用||保留原address，避免没有匹配项时address变为undefined。

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