Comment modifier l'état d'un composant en réaction

Dans React, vous pouvez utiliser setState() pour modifier l'état du composant. setState() est une méthode utilisée pour mettre à jour l'état du composant. Cette méthode peut mettre en file d'attente les modifications de l'état du composant et également obtenir le dernier état de la syntaxe. "setState (mise à jour, [fonction de rappel])".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Comment modifier l'état du composant dans React

Dans React, l'état du composant ne peut pas être modifié directement. Il doit être modifié via setState()

Dans React, setstate est une méthode utilisée pour mettre à jour l'état du composant ; setState() les modifications apportées à l'état du composant sont mises en file d'attente et React est informé qu'il doit restituer ce composant et ses sous-composants en utilisant l'état mis à jour. La syntaxe est "setState(object, [callback function])".

Syntaxe :

setState(updater[, callback])

updater updater

fonction de rappel de rappel exécutée après la mise à jour

Modifier l'état

Par exemple, si vous souhaitez modifier la valeur du contenu dans l'état en '香香'

state = {
  content: '大熊'
}

par modification directe. ne déclenche pas la mise à jour de la vue :

this.state.content = '香香'

doit être modifié via setState :

this.setState({
  content: '香香'
})

Obtenir la dernière valeur d'état

Parce que setState() est asynchrone, vous ne pourrez peut-être pas obtenir la dernière valeur après la modification le statut, si vous souhaitez obtenir la dernière valeur de statut, vous pouvez fournir une fonction de rappel pour setState(). Ce rappel sera exécuté une fois le statut mis à jour. Vous pouvez obtenir le dernier statut dans la fonction de rappel

Exemple :

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

setState() Un paramètre peut également être une fonction. Cette fonction reçoit deux paramètres : le premier paramètre est la valeur de l'état avant la mise à jour, et le deuxième paramètre est des accessoires (qui peuvent obtenir les données transmises par le composant parent lors de la modification) ; l'état, le paramètre précédent est impliqué. Cette forme peut être utilisée lorsqu'une valeur d'état est utilisée.

this.setState((state, props) => {
  console.log(state.content, props)
  // 返回一个对象
  return {
    content: prev.content + '香香'
  }
})

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!