J'ai le code réduit suivant qui contrôle mon tableau de bord

function App(props){
    const [role, setRole] = React.useState("guest");
    const [componentDrawerRender, setComponentDrawerRender] = React.useState(null);

    const handleSelectionDrawerClick = (component) => {

        setComponentDrawerRender(component);
        handleOpenComponentDrawer(true);
    };

    const handleLoginCallback = (user) => {

        if (user !== false) {
          handleCloseComponentDrawer();
          setRole(user.type);    <-- setting the new state does not work 
          console.log(val.type + " -> " + role );   <-- this here shows != values

        } else {
          //do nothing
        }
      };

    return (  
        <Button
        onClick={() => {
          handleSelectionDrawerClick(
            <LoginPage callback={handleLoginCallback} />
          );
        }}
      >
        LOG IN
      </Button>);
}

Le but de ce code est d'ouvrir un tiroir (ce qu'il fait), de restituer un composant dans le tiroir (ce qu'il fait), et après que l'utilisateur se soit connecté avec le composant, fermez le tiroir (ce qu'il fait) et mettez à jour l'état ( ce qu'il fait presque).

Le problème se produit dans la méthode handleLoginCallback. De bonnes données sont renvoyées et l'état est mis à jour avec de bonnes données. Cependant, seuls certains composants de la page sont mis à jour.

Comment fonctionne le processus de rendu pour les composants fonctionnels? appelle-t-il à nouveau la fonction ou recalcule-t-il seulement la valeur de retour? Le code suivant n'est pas recalculé lors du nouveau rendu. Est-il acceptable que certains États dépendent d'autres États?

const [mainList, setMainList] = React.useState((role) => {
    console.log(role);
    if (role === undefined || role === null) {
      return GuestListItems(handleSelectionDrawerClick);
    } else if (role === "customer") {
      return CustomerListItems;
    } else {
      return OwnerListItems;
    }
  });

Ci-dessous est le code dans le <LoginPage> qui appelle la méthode de rappel.

onSubmit(e) {
    e.preventDefault();

    this.setState({ isLoading: true });
    this.props.login(this.state, this.handleLoadingBar).then((retState) => {
      if(retState === null){
        this.props.callback(false);       <-- here 
      }else {
        this.props.callback(retState);    <-- here 
      }
    });
  }
0
WhiffWham 11 avril 2020 à 06:14

2 réponses

Meilleure réponse
onSubmit(e) {
    e.preventDefault();

    this.setState({ isLoading: true });
    this.props.login(this.state, this.handleLoadingBar).then((retState) => {
      if(retState === null){
        this.props.callback(false);       <-- here 
      }else {
        this.props.callback(retState);    <-- here 
      }
    });
  }

Vous définissez l'état initial de ceci sur une fonction non au résultat de la fonction.

0
WhiffWham 12 avril 2020 à 18:09

Dans votre code, la valeur role est mise à jour lors de l'actualisation suivante (c.-à-d. Appel de fonction), car l'appel setRole. Le rôle ne change pas à la ligne console.log pour plusieurs raisons:

  1. le role est marqué comme const;
  2. JavaScript n'exécute aucune autre fonction tant que la fonction actuelle n'est pas terminée (mieux: la pile d'appels se vide).

Vérifiez également ceci: https://reactjs.org/docs/hooks-reference. html # mises à jour-fonctionnelles

Le hook useState est une fonction normale qui obtient un argument et renvoie un tuple. Bien que le hook (et donc l'argument) soit appelé à chaque actualisation, la valeur de l'argument n'est utilisée qu'à la toute première initialisation.

Voici la description de l'API: https://reactjs.org/docs/hooks-reference. html # usestate

0
Mario Vernari 11 avril 2020 à 03:33