Mise à jour d'un objet avec setState à Réagir

Il y a plusieurs manières de le faire, depuis que l'état de mise à jour est un opération asynchrone, afin de mettre à jour l'état de l'objet, nous avons besoin d'utiliser la fonction de mise à jour avec setState.

1 - la plus Simple:

D'abord créer une copie de jasper puis effectuez les modifications suivantes:

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
})

Au lieu d'utiliser Object.assign on peut aussi l'écrire comme ceci:

let jasper = { ...prevState.jasper };

2 - à l'Aide de la propagation de l'opérateur:

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
    }
}))

Remarque: Object.assign et Spread Operator crée seulement la copie superficielle, donc si vous avez défini imbriquée objet ou groupe d'objets, vous avez besoin d'une approche différente.

---

Mise à jour imbriquée d'état de l'objet:

Supposons que vous ayez défini comme état:

this.state = {
  food: {
    sandwich: {
      capsicum: true,
      crackers: true,
      mayonnaise: true
    },
    pizza: {
      jalapeno: true,
      extraCheese: false
    }
  }
}

De mettre à jour extraCheese de pizza objet:

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
    }
  }
}))

La mise à jour de tableau d'objets:

Permet de supposer que vous avez des choses à faire application, et vous gérez les données de ce formulaire:

this.state = {
  todoItems: [
    {
      name: 'Learn React Basics',
      status: 'pending'
    }, {
      name: 'Check Codebase',
      status: 'pending'
    }
  ]
}

De mettre à jour le statut de todo objet, exécutez une carte sur le tableau et vérifier une valeur unique de chaque objet, en cas de condition=true, retour le nouvel objet avec la valeur mise à jour, sinon même objet.

let key = 2;
this.setState(prevState => ({

  todoItems: prevState.todoItems.map(
    el => el.key === key? { ...el, status: 'done' }: el
  )

}))

Suggestion: Si l'objet n'a pas une valeur unique, alors l'utilisation d'index de tableau.

L'utilisation de la propagation de l'opérateur et de certains ES6 ici

this.setState({
    jasper: {
          ...this.state.jasper,
          name: 'something'
    }
})

essayez cela,il devrait fonctionner correctement

this.setState(Object.assign(this.state.jasper,{name:'someOtherName'}));

Une autre option: définir votre variable de la Jasper objet et puis il suffit d'appeler une variable.

Propagation de l'opérateur: ES6

this.state = {  jasper: { name: 'jasper', age: 28 } } 

let foo = "something that needs to be saved into state" 

this.setState(prevState => ({
    jasper: {
        ...jasper.entity,
        foo
    }
})

Je sais qu'il y a beaucoup de réponses ici, mais je suis surpris aucun d'entre eux de créer une copie du nouvel objet à l'extérieur de setState, et puis tout simplement setState({newObject}). Propre, concis et fiable. Donc dans ce cas:

JS:

const jasper = { ...this.state.jasper, name: 'someothername' }
this.setState(prevState => ({ jasper }))

Ou pour une propriété dynamique (très utile pour les formulaires)

JS:

const jasper = { ...this.state.jasper, [VarRepresentingPropertyName]: 'new value' }
this.setState(prevState => ({ jasper }))

Vous pouvez essayer ceci:

this.setState(prevState => {
   prevState = JSON.parse(JSON.stringify(this.state.jasper));
   prevState.name = 'someOtherName';
   return {jasper: prevState}
})

ou pour d'autres propriétés:

this.setState(prevState => {
   prevState = JSON.parse(JSON.stringify(this.state.jasper));
   prevState.age = 'someOtherAge';
   return {jasper: prevState}
})

Ou vous pouvez utiliser handleChage fonction:

handleChage(event) {
   const {name, value} = event.target;
    this.setState(prevState => {
       prevState = JSON.parse(JSON.stringify(this.state.jasper));
       prevState[name] = value;
       return {jasper: prevState}
    })
}

et le code HTML:

<input 
   type={"text"} 
   name={"name"} 
   value={this.state.jasper.name} 
   onChange={this.handleChange}
/>
<br/>
<input 
   type={"text"} 
   name={"age"} 
   value={this.state.jasper.age} 
   onChange={this.handleChange}
/>

Sans l'aide de Async et Await Utiliser ce...

funCall(){    
     this.setState({...this.state.jasper, name: 'someothername'});
}

Si vous utilisez avec Async Et Await utiliser ce...

async funCall(){
      await this.setState({...this.state.jasper, name: 'someothername'});
}