Komponen React Tab tidak mengemas kini tab aktif apabila nilai kedai Redux berubah

Question

Saya menggunakan komponen Tab UI Chakra dalam aplikasi React saya. Saya mempunyai nilai berangka yang disimpan dalam Redux dan saya mahu menukar tab aktif berdasarkan nilai itu. Walau bagaimanapun, apabila saya mengemas kini nilai berangka di kedai, tab aktif tidak berubah dengan sewajarnya. Bagaimanakah saya boleh menyelesaikan masalah ini?

Berikut ialah kod untuk komponen MyTabs

function MyTabs() {
  nombor const = useSelector(selectnumber);

  console.log(nombor);

  kembali (
    <Tab defaultIndex={number}>
      <TabPanels>
        <Panel Tab>
          <Saiz kotak imej="200px"
        </TabPanel>
        <Panel Tab>
          <Saiz kotak imej="200px"
        </TabPanel>
      </TabPanels>
      <TabList>
        <Tab>Naruto</Tab>
        <Tab>Sasuke</Tab>
      </TabList>
    </Tab>
  );
}

Answer 1

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.

Answer 2

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>