當 Redux 儲存值變更時，React Tab 元件不會更新活動標籤

Question

我在 React 應用程式中使用 Chakra UI Tab 元件。我在 Redux 中儲存了一個數字值，我想根據該值更改活動標籤。但是，當我更新商店中的數值時，活動標籤不會相應更改。我該如何解決這個問題？

以下是 MyTabs 組件的代碼：

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

  console.log(number);

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

Answer 1

為了確保當 Redux 中的數值發生變化時，Chakra UI Tab 元件中的活動標籤會更新，您可以使用 React 提供的 useEffect 鉤子。 useEffect 掛鉤可讓您執行副作用，例如當特定依賴項發生變更時更新活動標籤。

您可以如下修改 MyTabs 元件：

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

在此更新的程式碼中，useEffect 掛鉤用於在數值變更時調度操作 (updateNumber)。確保您已在 Redux 切片中實現了相應的操作和化簡器邏輯 (selectNumber) 來處理數位更新。

透過這樣做，活動標籤將根據 Redux 中儲存的數值自動更新。

Answer 2

defaultIndex 屬性是：

請參閱受控和不受控元件和預設值文件：

您可以使用受控選項卡

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

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