Comment permettre aux composants React d'enregistrer les variables du clic droit, ce qui nécessite un double-clic pour y parvenir

Question

J'ai rencontré un problème avec un composant React dans mon projet où je devais cliquer deux fois pendant la navigation pour enregistrer correctement la variable pour le clic droit. Voici les détails du problème et mon code :

J'ai un composant React qui représente un système de navigation dans les cours. Lorsque je clique sur un cours dans le menu de navigation, il doit enregistrer l'index du cours cliqué et lancer une action. Cependant, j'ai remarqué que je devais cliquer deux fois pour que l'index soit enregistré correctement.

À l'intérieur du composant, il existe une fonction appelée handleOtp, qui gère la logique de démarrage de la lecture vidéo et la configuration de l'OTP d'accès vidéo. Le problème semble provenir de cette fonction.

Ce qui suit est un aperçu simplifié de la fonction handleOtp :

<code>const handleOtp = async () =>
  essayer {
    const lessonId = cours.lessons[cliqué]?.video?.id;

    // C'est le problème
    const { data } = wait axios.post("/api/videoOtp", {
      ID vidéo : ID de la leçon,
      nom d'utilisateur : utilisateur.nom d'utilisateur,
      IP,
    });

    si (!data.otp && !data.playbackInfo) {
      return toast.error("Échec de l'OTP vidéo ! Recharger la page");
    }

    chargerVidéo({
      otp : données.otp,
      lectureInfo : data.playbackInfo,
      configuration: {
        lecture automatique : vrai,
      },
      conteneur : conteneur.courant,
    });
  } attraper (erreur) {
    console.erreur(erreur);
  }
} ;

</code>

D'après mon observation, le premier clic a déclenché la fonction handleOtp, mais l'index du clic était erroné, ce qui a entraîné un comportement inattendu. Le deuxième clic a fini par enregistrer l'index de clic correct et a fonctionné comme prévu.

Je me suis assuré qu'il n'y avait pas de mises à jour de statut asynchrones qui pourraient causer des problèmes. Je soupçonne qu'il peut y avoir un problème de timing ou de gestion de l'état à l'origine de ce comportement, mais j'ai du mal à déterminer la cause exacte.

J'aimerais pouvoir comprendre pourquoi ce comportement de double-clic se produit et comment garantir que l'index de clic correct est enregistré lors du premier clic. Toutes les idées ou suggestions seraient grandement appréciées.谢谢！

我的React组件：

        

          

            
              {course.lessons.map((leçon, index) => (
                
 {
                    setClicked(index);
                    setIsLoading(true);
                    setSpin(vrai);
                    setCheckoutVisibility("aucun");
                    checkTransactionStatus(index);
                    setPaymentMethod("kiosque");
                    setKioskPhoneNumber("");
                    handleOtp();
                  }}
                  
                  clé={index}
                  icon={{index + 1}}
                >≪/pré>
尝试使用console.log记录clicked变量：
            

Answer 1

C'est à cause de la fonction setState是异步执行的。你在OnClick事件中设置了clicked，然后调用了handleOtp. Dans ce cas, l'état n'a pas encore été mis à jour, vous obtenez donc un mauvais index au premier clic.

Il vous suffit de index作为参数传递给handleOtp。不再需要setClicked.

const handleOtp = async (index) => {}

<StudentRoute>
    <div className="row mt-2">
      <div className="lessons-menu">
        <Menu
          defaultSelectedKeys={[clicked]}
          inlineCollapsed={collapsed}
          style={{ height: "100%" }}
        >
          {course.lessons.map((lesson, index) => (
            <Item
              onClick={async () => {
                setIsLoading(true);
                setSpin(true);
                setCheckoutVisibility("none");
                checkTransactionStatus(index);
                setPaymentMethod("kiosk");
                setKioskPhoneNumber("");
                handleOtp(index);
              }}
              
              key={index}
              icon={<Avatar>{index + 1}</Avatar>}
            />
          ))}
        <Menu/>
      </div>
    </div>
<StudentRoute/>