Le composant React Tab ne met pas à jour l'onglet actif lorsque la valeur du magasin Redux change

Question

J'utilise le composant Chakra UI Tab dans mon application React. J'ai une valeur numérique stockée dans Redux et je souhaite modifier l'onglet actif en fonction de cette valeur. Cependant, lorsque je mets à jour la valeur dans le magasin, l'onglet actif ne change pas en conséquence. Comment puis-je résoudre ce problème?

Voici le code du composant MyTabs

fonction MesTabs() {
  const number = useSelector(selectnumber);

  console.log(numéro);

  retour (
    <Onglets defaultIndex={numéro}>
      <TabPanels>
        <TabPanel>
          <Image boxSize="200px" fit="couverture" src="" />
        </TabPanel>
        <TabPanel>
          <Image boxSize="200px" fit="couverture" src="" />
        </TabPanel>
      </TabPanels>
      <ListeTabulations>
        <Tab>Naruto</Tab>
        <Tab>Sasuke</Tab>
      </ListeTabulations>
    </Onglets>
  );
}

Answer 1

Pour garantir que l'onglet actif du composant Chakra UI Tab est mis à jour lorsque la valeur dans Redux change, vous pouvez utiliser le hook useEffect fourni par React. Le hook useEffect vous permet d'effectuer des effets secondaires tels que la mise à jour de l'onglet actif lorsqu'une dépendance spécifique change.

Vous pouvez modifier le composant MyTabs comme suit :

import { useEffect } from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
    import { selectNumber, updateNumber } from 'path/to/your/redux/slice';
    function MyTabs() {
      const number = useSelector(selectNumber);
      const dispatch = useDispatch();
      useEffect(() => {
        // Update the active tab index in Redux when the number changes
        dispatch(updateNumber(number));
      }, [number, dispatch]);
      return (
        <Tabs defaultIndex={number}>
          <TabPanels>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
          </TabPanels>
          <TabList>
            <Tab>Naruto</Tab>
            <Tab>Sasuke</Tab>
          </TabList>
        </Tabs>
      );
    }**'

Dans ce code mis à jour, le hook useEffect est utilisé pour distribuer une opération (updateNumber) lorsque la valeur change. Assurez-vous d'avoir implémenté les opérations appropriées et la logique de réduction (selectNumber) dans votre tranche Redux pour gérer les mises à jour numériques.

En faisant cela, l'onglet actif sera automatiquement mis à jour en fonction de la valeur numérique stockée dans Redux.

Answer 2

defaultIndex Les attributs sont :

Voir la documentation Composants contrôlés et non contrôlés et Valeurs par défaut  :

Vous pouvez utiliser Onglet Contrôlé

const tabIndex = useSelector(selectnumber);
const dispatch = useDispatch();

<Tabs 
  index={tabIndex} 
  onChange={(index) => dispatch({ type: 'SET_TAB_INDEX', payload: { index } })}>
</Tabs>