Javascript 使用扩展运算符更新数组对象值

我正在尝试更新数组对象和对象的值。我的示例代码如下。没有得到我预期的结果。如果有人能帮忙就好了

    let array = [
        {   
            id:"01",
            "name": {
                "value": "jaison",
                "error": null
            },
            "email": {
                "value": "jaison@yopmail.com",
                "error": null
            }
        },
        {
            id:"02",
            "name": {
                "value": "jaison 1",
                "error": null
            },
            "email": {
                "value": "jaison1@yopmail.com",
                "error": null
            }
        }
    ];

    this.state{
        data:array
    }

    //This two data getting a from a form
    const key = "02";
    const editedData = {name:"updated jaison 1", email:"updatedjaison1@yopmail.com"}

    const newData = [...this.state.data];

    const index = newData.findIndex(item => key === item.id);

    let item = newData[index];

    //Working as expcted 
    console.log('1', item);

    Object.keys(editedData).forEach(function (key) {
      item[key] = editedData[key];
    });

    //Working as expcted 
    console.log('2', item);

    this.setState({ data: [...this.state.data, item]}, () => {
        //Not Working as expcted 
        console.log(this.state.data);
    });

    Expected result
   let array = [
    {   
        id:"01",
        "name": {
            "value": "jaison",
            "error": null
        },
        "email": {
            "value": "jaison@yopmail.com",
            "error": null
        }
    },
    {
        id:"02",
        "name": {
            "value": "updated jaison 1",
            "error": null
        },
        "email": {
            "value": "updatedjaison1@yopmail.com",
            "error": null
        }
    }
];

---

与查找索引并使用

forEach

循环数组不同，我将执行以下操作：

const updatedArray = newData.map(item => {
   // if editedData has a key attribute:
   if (item.id === editedData.key) {
       return editedData; //you'd need to add a key attribute to the data
   } else {
       return item;
   }
});
this.setState({data: updatedArray});

---

与查找索引并使用

forEach

循环数组不同，我将执行以下操作：

const updatedArray = newData.map(item => {
   // if editedData has a key attribute:
   if (item.id === editedData.key) {
       return editedData; //you'd need to add a key attribute to the data
   } else {
       return item;
   }
});
this.setState({data: updatedArray});

---

您只需使用

map

：

   let array = [
        {   
            id:"01",
            "name": {
                "value": "jaison",
                "error": null
            },
            "email": {
                "value": "jaison@yopmail.com",
                "error": null
            }
        },
        {
            id:"02",
            "name": {
                "value": "jaison 1",
                "error": null
            },
            "email": {
                "value": "jaison1@yopmail.com",
                "error": null
            }
        }
    ];

    const key = "02";

    const updated = array.map(item => {
        if (item.id === key) {
            return {id: key, name:"updated jaison 1", email:"updatedjaison1@yopmail.com"}
        }
        return item;
    });

setState({data: updated});

---

您只需使用

map

：

   let array = [
        {   
            id:"01",
            "name": {
                "value": "jaison",
                "error": null
            },
            "email": {
                "value": "jaison@yopmail.com",
                "error": null
            }
        },
        {
            id:"02",
            "name": {
                "value": "jaison 1",
                "error": null
            },
            "email": {
                "value": "jaison1@yopmail.com",
                "error": null
            }
        }
    ];

    const key = "02";

    const updated = array.map(item => {
        if (item.id === key) {
            return {id: key, name:"updated jaison 1", email:"updatedjaison1@yopmail.com"}
        }
        return item;
    });

setState({data: updated});

---

当您在

forEach

中更新

item[key]

时，它只会使用字符串值更新

name

和

email

。此外，它还改变了

状态

相反，您可以循环throguh

editedData

object更新该特定索引的克隆。使用将

错误

和其他属性保持原样，并仅更新

值

属性。然后更新克隆的

数据

数组的索引，并按如下方式调用

setState

：

const key = "02",
      editedData = { name: "updated jaison 2", email: "updatedjaison2@yopmail.com" },
      data = [...this.state.data],
      index = data.findIndex(item => key === item.id),
      updatedData = { ...data[index] };

// loop through and update only the keys you need 
for(const key in editedData) {
  updatedData[key] = { ...updatedData[key], value: editedData[key] }
}

data[index] = updatedData;

this.setState({ data })

---

当您在

forEach

中更新

item[key]

时，它只会使用字符串值更新

name

和

email

。此外，它还改变了

状态

相反，您可以循环throguh

editedData

object更新该特定索引的克隆。使用将

错误

和其他属性保持原样，并仅更新

值

属性。然后更新克隆的

数据

数组的索引，并按如下方式调用

setState

：

const key = "02",
      editedData = { name: "updated jaison 2", email: "updatedjaison2@yopmail.com" },
      data = [...this.state.data],
      index = data.findIndex(item => key === item.id),
      updatedData = { ...data[index] };

// loop through and update only the keys you need 
for(const key in editedData) {
  updatedData[key] = { ...updatedData[key], value: editedData[key] }
}

data[index] = updatedData;

this.setState({ data })

---

您正在获取需要替换的项的索引，但您没有覆盖在

editedData

中声明的未使用数据。您可以直接赋值，因为您具有此索引权限。state.data[2]。name.value=“updated jaison 1”；this.state.data[2]。email.value=”updatedjaison1@yopmail.com“如果你不知道指数，情况可能不同。希望它能工作object.keys（editedData）.forEach（函数（key）{item[key]=editedData[key]；}）；这是我试图覆盖或更新数据的代码，因为我不能盲目地在一夜之间更新数据，因为数据不同format@adiga答案为我工作，欢迎更多最短的答案！您正在获取需要替换的项的索引，但您没有覆盖在

editedData

中声明的未使用数据。您可以直接赋值，因为您具有此索引权限。state.data[2]。name.value=“updated jaison 1”；this.state.data[2]。email.value=”updatedjaison1@yopmail.com“如果你不知道指数，情况可能不同。希望它能工作object.keys（editedData）.forEach（函数（key）{item[key]=editedData[key]；}）；这是我试图覆盖或更新数据的代码，因为我不能盲目地在一夜之间更新数据，因为数据不同format@adiga答案为我工作，欢迎更多最短的答案！感谢快速回答，请您详细了解我的问题和预期数据结构。感谢快速回答，请您详细了解我的问题和预期数据结构。感谢快速回答，请您详细了解我的问题和预期的数据结构。感谢您的快速回答，请您详细了解我的问题和预期的数据结构。感谢您的回答，您就快到了。但有两件事遗漏了。更新后，阵列消失，除编辑的属性外，其他属性形成对象的第一级。此外，我不能为内部对象手动给出错误：null，因为有可能在那里有更多的属性，所以我们可以使用扩展运算符（…restProps）？@Jaison更新了答案。请尝试一下，让我知道谢谢，亲爱的，它的工作非常完美，我正在寻找的，再次感谢。谢谢你的回答，你就快到了。但有两件事遗漏了。更新后，阵列消失，除编辑的属性外，其他属性形成对象的第一级。此外，我不能为内部对象手动给出错误：null，因为有可能在那里有更多的属性，所以我们可以使用扩展运算符（…restProps）？@Jaison更新了答案。请尝试一下，让我知道谢谢，亲爱的，这是完美的工作，我正在寻找，再次感谢。