Untuk memastikan tab aktif dalam komponen Tab UI Chakra dikemas kini apabila nilai dalam Redux berubah, anda boleh menggunakan cangkuk useEffect yang disediakan oleh React. Cangkuk useEffect membolehkan anda melakukan kesan sampingan seperti mengemas kini tab aktif apabila kebergantungan tertentu berubah.

Anda boleh mengubah suai komponen MyTabs seperti berikut:

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>
      );
    }**'

Dalam kod yang dikemas kini ini, cangkuk useEffect digunakan untuk menghantar operasi (Nombor kemas kini) apabila nilai berubah. Pastikan anda telah melaksanakan operasi yang sesuai dan logik pengurang (selectNumber) dalam kepingan Redux anda untuk mengendalikan kemas kini angka.

Dengan melakukan ini, tab aktif akan dikemas kini secara automatik berdasarkan nilai berangka yang disimpan dalam Redux.

defaultIndex Sifat-sifat tersebut ialah:

Lihat dokumentasi Komponen Terkawal dan Tidak Terkawal dan Nilai Lalai :

Anda boleh menggunakan Tab terkawal

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

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