为了确保当 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 中存储的数值自动更新。

defaultIndex 属性是：

请参阅受控和不受控组件和默认值文档：

您可以使用受控选项卡

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

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