Titre réécrit comme suit : Les variables ne sont pas mises à jour lors de l'utilisation du hook useState()

Question

Je travaille sur un projet de réseau social utilisant React.

Je souhaite remplacer un composant d'un composant de classe par un composant de fonction et utiliser des hooks, alors un problème global se pose :

Lorsque je passe à un nouvel utilisateur, la page affiche le statut de l'utilisateur précédent

J'ai utilisé le hook useState(), j'ai tout débogué, mais pour une raison quelconque, lorsqu'un nouveau composant d'état est rendu, il ne se met pas à jour

const ProfileStatus = (props) => {
  const [edditMode, setEdditMode] = useState(false);
  const [status, setValue] = useState(props.status || "Empty");

  const onInputChange = (e) => {
    setValue(e.target.value);
  };
  const activateMode = () => {
    setEdditMode(true);
  };
  const deactivateMode = () => {
    setEdditMode(false);
    props.updateUserStatus(status);
  };

Je pensais que le problème était que le composant conteneur était toujours un composant de classe, mais après l'avoir refait, rien n'a changé.

Answer 1

Une solution de contournement consiste à utiliser des useEffecthooks pour déclencher des mises à jour lorsque les propriétés changent. Vous pouvez utiliser ce hook pour comparer la propriété actuelle avec la propriété précédente, puis mettre à jour l'état dans l'état.

Vous pouvez l'utiliser comme référence et effectuer des ajustements en fonction de votre propre code.

const ProfileStatus = (props) => {
  const [edditMode, setEdditMode] = useState(false);
  const [status, setValue] = useState(props.status || "Empty");

  useEffect(() => {
    setValue(props.status || "Empty");
  }, [props.status]);

  const onInputChange = (e) => {
    setValue(e.target.value);
  };
  const activateMode = () => {
    setEdditMode(true);
  };
  const deactivateMode = () => {
    setEdditMode(false);
    props.updateUserStatus(status);
  };