如何更改嵌套对象阵列的使用情况

Question

我有一个状态：

const obj = [{id: "1", obj_of_names: [{
                             id: "a1",
                             name: "abc",
                             school: "xyz" },
                            { id:"b1",
                             name: "def",
                             school: "zyx" },
                            { id:"c1",
                             name: "ghi",
                             school: "pqr" }]
             },
             {id: "2", obj_of_names: [{
                             id: "d1",
                             name: "abc123",
                             school: "xyz123" }]
             }]

const [newobj, setObj] = useState("obj")

现在我想更新ID：D1内部ID：2的学校。假设旧价值是学校：xyz123现在我想将其更新到学校：newxyz123。 如何使用传播操作员或其他方法来实现这一目标？

我尝试了以下代码：

setObj((prevObjects) => {
            const tempIndex = prevObjects.findIndex(
                (item) => item.id === reqdImgID
            );
const newObject = obj[tempIndex].obj_of_names.map((obj) => { 
if (obj.id == reqdID) { 
return {  ...obj, 
school: newSchool,};}
return obj; }););

但是我将其作为OUPUT： { id：“ C1”， 名称：“ Ghi”， 学校：“ newxyz123” }

Answer 1

我建议创建一个接收原始数组，匹配器函数和替换功能的函数。此功能的目的是返回具有更改值的新数组。

function mutateObject(array, matcher, replacer) {
    // returns a new array, with all elements untouched, except for those that match the matcher function, which are replaced with new objects created by the replacer function
    return array.map(function (item) {
        return matcher(item) ? {...replacer(item)} : item;
    });
}

然后，使用该函数替换值。

mutateObject(obj, group => group.id == "2", group => {
    const newNames = mutateObject(group.obj_of_names, name => name.id === "d1", name => ({ ...name, school: "newxyz123" }));
    return { ...group, obj_of_names: newNames }
});

这将做什么：

1. 使用原始数组，找到ID（根对象中）为“ 2”的对象。
2. 应用替代功能，该功能将：
   1. 使用obj_of_names查找ID为“ D1”的对象。
   2. 使用传播操作员，应用替换函数以返回带有新的学校价值的新对象。
   3. 返回一个由替换obj_of_names对象克隆的新对象，其中包含替换的学校价值。

当然，您可以通过使用各种库克隆对象，突变并返回新对象来提高此代码及其可读性，但是如果您想开始使用，则可以解决。
另外，如果您想更改学校名称，建议使用@aweimon引用的答案，但是如果您想在各种标准上更改多个对象，则可以改善上述功能。

const obj = [{
    id: "1",
    obj_of_names: [{
        id: "a1",
        name: "abc",
        school: "xyz"
      },
      {
        id: "b1",
        name: "def",
        school: "zyx"
      },
      {
        id: "c1",
        name: "ghi",
        school: "pqr"
      }
    ]
  },
  {
    id: "2",
    obj_of_names: [{
      id: "d1",
      name: "abc123",
      school: "xyz123"
    }]
  }
]

function mutateObject(array, matcher, replacer) {
  // returns a new array, with all elements untouched, except for those that match the matcher function, which are replaced with new objects created by the replacer function
  return array.map(function(item) {
    return matcher(item) ? { ...replacer(item)
    } : item;
  });
}

const updatedObj = mutateObject(obj, group => group.id == "2", group => {
  const newNames = mutateObject(group.obj_of_names, name => name.id === "d1", name => ({ ...name,
    school: "newxyz123"
  }));
  return { ...group,
    obj_of_names: newNames
  }
});

console.log(updatedObj);

Answer 2

const arr = [{id: "1", obj_of_names: [{
                             id: "a1",
                             name: "abc",
                             school: "xyz" },
                            { id:"b1",
                             name: "def",
                             school: "zyx" },
                            { id:"c1",
                             name: "ghi",
                             school: "pqr" }]
             },
             {id: "2", obj_of_names: [{
                             id: "d1",
                             name: "abc123",
                             school: "xyz123" }]
             }]

您可以在另一个映射中调用映射，然后更改阵列whitin whitin the对象：

const newArr =  arr.map((item)=>{
        if(item.id == 2){
            return {...item, obj_of_names: item.obj_of_names.map((item2)=>{
    
                if(item2.id === 'd1'){
                    return {...item2, school: 'newxyz123'}
                }
    
                return item2
            }) }
        }
    
        return item
    })

    const [state, setState] = useState(arr)

然后您可以调用setState并使用newarr更新它。