Fonction à exécuter avant la fin de useEffect

Question

J'ai ce code :

const ChatsPage = () => {
    let username = ""
    let secret = ""
    useEffect(() => {
        axios
            .post('http://localhost:3001/authenticate')
            .then((response) => {
                username = response.data.username
                secret = response.data.secret
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

    let chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret);

    return (
        <div style={{ height: '100vh' }}>
            <MultiChatSocket {...chatProps} />
            <MultiChatWindow {...chatProps} style={{ height: '100vh' }} />
        </div>
    );
}

Le problème est que let chatProps = useMultiChatLogic('xxxx-xx-x-xx-xxx', username, Secret); 在 useEffect s'exécute avant de se terminer. J'ai essayé de le déplacer dans un .then mais cela a donné des erreurs de hook et d'autres choses, mais rien n'a fonctionné.

Answer 1

Je pense qu'il vous manque une compréhension de base de React. Consultez ce tutoriel sur les états, useEffect et le flux de contrôle général.

useEffect 是异步的——首次渲染后以及每当设置依赖项数组中捕获的变量时，React 都会执行回调。您的依赖项数组为空，因此此 useEffect est asynchrone - React exécute le rappel après le premier rendu et chaque fois qu'une variable capturée dans le tableau des dépendances est définie. Votre tableau de dépendances est vide, donc ceci

est exécuté une fois dans le cycle de vie du composant (après le premier rendu).

Je ne sais pas ce qu'est le Multi, mais vous pouvez essayer quelque chose comme ceci :

const ChatsPageLoader = () => {
  const [username, setUsername] = useState('');
  const [secret, setSecret] = useState('');

  useEffect(() => {
    axios
      .post('http://localhost:3001/authenticate')
      .then((response) => {
        setUsername(response.data.username);
        setSecret(response.data.secret);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  if (!username || !secret) {
    return 
Loading...
;
  }

  return ;
};

const ChatsPage = ({username, secret}) => {
  const chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret);

  return (
    

      
      
    
  );
};

username 和 secret 仍然是默认的空字符串，因此我们渲染一条加载消息。渲染后，useEffectIci, lors du premier rendu, nous savons que la requête n'est pas encore terminée car username et secret sont toujours les chaînes vides par défaut, nous rendons donc un message de chargement. Après le rendu,

exécute et démarre la requête.

username 和 secret 设置状态，这会触发另一个渲染。在此渲染上，响应中的 username 和 secret 值可用（我假设它们保证在响应中为非空字符串），因此不会渲染加载消息。相反，我们渲染 ChatsPageAprès un certain temps, la réponse arrive et nous avons un composant

qui accepte les accessoires avec les données de réponse.

useMultiChatLogic 这样的钩子 必须在任何条件之上声明< /a>.如果这不是一个钩子，那么调用可以发生在 ifDes composants supplémentaires sont nécessaires car aucun composant supplémentaire n'est nécessaire dans le corps de la fonction du composant après

.

---

setState 来完成，而不是 =La règle d'or de React est que l'état est immuable, donc si des données changent d'un rendu à l'autre, elles doivent passer

. 🎜