为了确保当 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 } })}>