Existem várias maneiras de fazer isso, já que a atualização de estado é uma operação assíncrona ; portanto, para atualizar o objeto de estado, precisamos usar a função atualizador com setState
.
1- Um mais simples:
Primeiro, crie uma cópia jasper
e faça as alterações:
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
})
Em vez de usar Object.assign
, também podemos escrever assim:
let jasper = { ...prevState.jasper };
2- Usando o operador de propagação :
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
}
}))
Nota: Object.assign
e Spread Operator
cria apenas uma cópia superficial , portanto, se você definiu um objeto aninhado ou uma matriz de objetos, precisará de uma abordagem diferente.
Atualizando objeto de estado aninhado:
Suponha que você definiu o estado como:
this.state = {
food: {
sandwich: {
capsicum: true,
crackers: true,
mayonnaise: true
},
pizza: {
jalapeno: true,
extraCheese: false
}
}
}
Para atualizar o objeto extra de queijo de pizza:
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
}
}
}))
Atualizando matriz de objetos:
Vamos supor que você tenha um aplicativo de tarefas pendentes e que esteja gerenciando os dados neste formulário:
this.state = {
todoItems: [
{
name: 'Learn React Basics',
status: 'pending'
}, {
name: 'Check Codebase',
status: 'pending'
}
]
}
Para atualizar o status de qualquer objeto todo, execute um mapa na matriz e verifique se há algum valor exclusivo de cada objeto; no caso condition=true
, retorne o novo objeto com valor atualizado, caso contrário, o mesmo objeto.
let key = 2;
this.setState(prevState => ({
todoItems: prevState.todoItems.map(
el => el.key === key? { ...el, status: 'done' }: el
)
}))
Sugestão: Se o objeto não tiver um valor exclusivo, use o índice da matriz.
age
propriedade dentrojasper
.