J'ai une composante fonctionnelle qui gère plusieurs états, entre autres, un état, qui stocke l'index, avec lequel je rends un type de table, en cliquant sur un bouton approprié. OnClick Ce bouton appelle une fonction de rappel, qui exécute un gestionnaire de clic. Qui cliquez sur le gestionnaire modifie l'état d'index, sur le même "index" comme entrée de matrice, dans laquelle je stocke un objet avec des informations pour le rendu d'un composant enfant.
Je m'attendrais, que Onclick l'état changerait avant le Le rendu se produit, le composant pourrait donc rendre correctement. Pourtant, cela n'arrive que d'un rendu plus tard. P>
J'ai déjà essayé d'appeler l'utilisation de l'USEEffect-Crochet, lorsque cet état d'indice change, mais cela n'a monidé ni. P>
Voici une version abrégée du code: p> autre "bas" dans le code, j'ai obtenu la fonction, ce qui rend les entrées de la table. Là-bas, je passe l'opération Onclick dans la composante enfant de la table comme suit: P> <SomeEntryComponent
onClick={() => handleClick(arrayEntry.id)}
>
// some code which is not affecting my problem
</SomeEntryComponent>
3 Réponses :
Lorsque vous appelez BuildNewComponent L'index n'est pas encore mis à jour. Vous venez d'appeler SSTATE, rien ne garantit que la valeur est mise à jour immédiatement après cela. Vous pouvez utiliser ID ici ou appelez BuildNewComponent dans un utilisateurFEFFECT qui a index comme dépendance.
Je pense que vous pouvez avoir le comportement correct si vous utilisez useeffect code> et surveiller index code> modifications. export const someComponent = () => {
[index, setIndex] = useState(-1);
useEffect(() => {
// This is a function, I use to render the table
buildNewComponent(index);
}, [buildNewComponent, index])
const handleClick = (id) => {
setIndex(id);
}
}
Je ne pense pas que buildnewcomponent devrait faire partie de la vérification de l'égalité dans useeffect . Cela dépend de la mise en œuvre, mais il échoue toujours à la vérification de l'égalité ou 2. Ne changements jamais
@Andrew Je suis d'accord avec vous, car je ne sais pas ce qui est à l'intérieur Buildnewcomponent , j'aurais dû mentionner cela.
Comment allais-je s'enrouler la bonne façon? Si je l'enveloppe dans un utilisateur supplémentaire, il me dit dans l'autre useeffect, qu'il ne trouve pas le câtimentNewComponent (bien sûr ...). Peut-être qu'il est trop tard pour moi, mais je ne peux pas imaginer, comment je ferais ça ..
@ Trobby, je n'ai pas plus d'informations pour vous dire exactement quoi faire, mais une idée est de repenser la stratégie derrière Buildnewcomponent . Il semble que index pourrait être utilisé comme composant accessoires et vous pouvez utiliser un arborescence composant qui conservera l'état et passera au composant suivant.
@Victorbarros Je vais essayer avec votre idée, car cela semble être le plus «réagir», même si Andres Solution fonctionne et est simplement aussi simple.
Comme d'autres ont déclaré, il s'agit d'un problème de synchronicité, où mais D'un point de vue de design, il serait préférable d'affirmer Votre rendu de composant devient dérivé de ses données, par opposition au manuel Création. P> index code> est mis à jour après em> buildcomponent code> a été invoqué. index code> par sa valeur, par opposition à la signaler dans un gestionnaire. Je ne connais pas les détails derrière buildcomponent code>, mais vous pouvez le transformer en un rendu conditionnel du composant. P> export const someComponent = () => {
[index, setIndex] = useState(-1);
const handleClick = (id) => setIndex(id);
const indexHasBeenSelected = index !== -1
return (
<div>
{indexHasBeenSelected && <NewComponent index={index} />}
</div>
)
}
Donc, juste pour moi de comprendre: pourquoi l'état d'index est-il maintenant mis à jour sur le premier "clic"?
Le montage de index . La vérification de l'égalité index! == -1 échouera toujours jusqu'à ce que index a été mis à jour. Cela signifie que lorsque
Maintenant, je l'ai eu, merci encore une fois. Mais ne devrait-il pas fonctionner d'une manière ou d'une autre, sans mettre en œuvre que «l'état change». N'est-ce pas que toute l'idée de la réaction des états fonctionne?
@Orby il devrait et fait. Mais en fonction de votre phrase / besoins, il semble que le composant ne doit pas exister jusqu'à ce qu'une entrée ait été cliquée. Afin de cacher cela et garder l'index mis à jour à tout moment, vous avez besoin de cette implémentation.
Au lieu de passer l'index de l'état, je passerais une pièce d'identité de l'argument. Vous appelez BuildNewComponant dans la même fonction, il suffit de passer ID Not index
Pensez à cela dans le flux de contrôle JS de base: quand entre
seidex (id); etbuildnewcomponent (index); sur la ligne suivante Pensez-vousindex a été réaffecté?[Index, SetIndex] = Impossible d'être atteint jusqu'à la prochaine fois que la fonction est appelée, c'est-à-dire la prochaine fois que le composant est rendu. Juste Utilisezid .