Dans ReactJS, comment mettre à jour la valeur de useState à partir d'un fichier séparé ?

Question

J'essaie d'accéder et de mettre à jour l'état d'un objet à partir de deux fichiers différents, si j'utilise un useState local pour chaque fichier, je peux le modifier, mais cela ne fonctionne pas,

J'ai essayé de nombreuses solutions différentes, en utilisant des hooks personnalisés et l'état local, mais aucune d'entre elles n'a résolu mon problème. Je suis resté bloqué sur ce problème pendant environ 5 heures et cela me rendait vraiment fou, toute aide serait appréciée.

Je pense que le problème est que j'essaie d'appeler le hook à partir de l'instruction return, mais je ne vois aucune autre façon de le faire, car c'est là qu'il est rendu.

information.js :

<button class="active" onClick={() => useSetHero(hero)}>

hero.js :

export const useSetHero = (newHero) =>
    const UpdateHero = () =>
        const [héros, setHero] = useState(newHero);
        setHero(nouveauHéros);
    } ;

    retourner { UpdateHero } ;

}
Le message d'erreur que je reçois actuellement est :
React Hook "useHero" ne peut pas être appelé dans une fonction de rappel. Les React Hooks doivent être appelés dans un composant de fonction React ou dans une fonction React Hook personnalisée

Answer 1

Définissez l'état pour le hook lui-même, pas pour les fonctions à l'intérieur du hook. Par exemple :

export const useHero = (initialHero) => {
  const [hero, setHero] = useState(initialHero);

  const UpdateHero = (newHero) => {
    setHero(newHero);
  };

  return { UpdateHero };
}

Veuillez également noter la différence entre initialHero和newHero ici. Le premier est utilisé pour initialiser la première valeur d'état lorsque le hook est appelé pour la première fois :

const { UpdateHero } = useHero(someValueHere);

Et ce dernier sert à le mettre à jour à une nouvelle valeur lors d'un appel UpdateHero :

<button class="active" onClick={() => UpdateHero(hero)}>

Veuillez noter que dans le code ci-dessus, vous n'appelez pas le hook directement dans le balisage. Les hooks sont appelés au début du composant (et les mêmes hooks sont appelés dans le même ordre à chaque rendu). Les données et/ou fonctions renvoyées par le hook peuvent ensuite être utilisées ultérieurement.

---

Quelques remarques :

1. Non utilisé icihero. Je suppose que le hook devrait également renvoyer cette valeur pour pouvoir être utilisé.
2. UpdateHero在这里是多余的，您可以直接返回setHeroC'est redondant ici, vous pouvez simplement renvoyer setHero.

Je suppose que ces deux questions sont dues au fait qu'il ne s'agit que d'un exemple très simplifié de ce que vous essayez de faire, le crochet réel est plus complexe que cela. Cependant, si ces problèmes ne sont pas pris en compte, le crochet ci-dessus peut être simplifié comme suit :

export const useHero = (initialHero) => {
  const [hero, UpdateHero] = useState(initialHero);

  return { hero, UpdateHero };
}