I am trying to update a value from an array object and object. my sample code is below. Not getting the result as I expected. It would be nice if someone can help?
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
}
}
];
When you update item[key]
inside the forEach
, it just updates name
and email
with a string values. Also, it mutates the state
Instead, you could loop throguh editedData
object update the clone of that specific index. Use the spread syntax to keep error
and other properties as it is and update only the value
property. Then update the index of the cloned data
array and call setState
like this:
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 })
Instead of finding the index and using a forEach
to loop over the array, I'd do something like:
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});
You can just use 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});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.