Є кілька способів зробити це, так як оновлення стану є асинхронної операцією , тому для поновлення стану об'єкта, ми повинні використовувати оновлення функції з setState
.
1- Найпростіший:
Спочатку створіть копію, jasper
а потім зробіть зміни в цьому:
this.setState(prevState => {
let jasper = Object.assign({}, prevState.jasper); // creating copy of state variable jasper
jasper.name = 'someothername'; // update the name property, assign a new value
return { jasper }; // return new object jasper object
})
Замість використання Object.assign
ми можемо також написати це так:
let jasper = { ...prevState.jasper };
2- Використання оператора спред :
this.setState(prevState => ({
jasper: { // object that we want to update
...prevState.jasper, // keep all other key-value pairs
name: 'something' // update the value of specific key
}
}))
Примітка: Object.assign
і Spread Operator
створюється лише неглибока копія , тому якщо ви визначили вкладений об'єкт або масив об'єктів, вам потрібен інший підхід.
Оновлення вкладеного об'єкта стану:
Припустимо, ви визначили стан як:
this.state = {
food: {
sandwich: {
capsicum: true,
crackers: true,
mayonnaise: true
},
pizza: {
jalapeno: true,
extraCheese: false
}
}
}
Щоб оновити додатковий сир об'єкта піци:
this.setState(prevState => ({
food: {
...prevState.food, // copy all other key-value pairs of food object
pizza: { // specific object of food object
...prevState.food.pizza, // copy all pizza key-value pairs
extraCheese: true // update value of specific key
}
}
}))
Оновлення масиву об’єктів:
Припустимо, у вас є додаток todo, і ви керуєте даними у цій формі:
this.state = {
todoItems: [
{
name: 'Learn React Basics',
status: 'pending'
}, {
name: 'Check Codebase',
status: 'pending'
}
]
}
Щоб оновити стан будь-якого об'єкта todo, запустіть карту на масиві і перевірте наявність унікального значення кожного об'єкта, у випадку condition=true
повернення нового об'єкта з оновленим значенням, інакше того ж об'єкта.
let key = 2;
this.setState(prevState => ({
todoItems: prevState.todoItems.map(
el => el.key === key? { ...el, status: 'done' }: el
)
}))
Пропозиція: Якщо об'єкт не має унікального значення, використовуйте індекс масиву.
age
майно всерединіjasper
.