為了確保當 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 (           Naruto Sasuke   ); }**'

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

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

defaultIndex屬性是：

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

您可以使用受控選項卡

const tabIndex = useSelector(selectnumber); const dispatch = useDispatch();  dispatch({ type: 'SET_TAB_INDEX', payload: { index } })}>