为了确保当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切片中实现了相应的操作和reducer逻辑（selectNumber）来处理数字更新。
通过这样做，活动选项卡将根据存储在Redux中的数字值自动更新。

defaultIndex prop是：
所选选项卡的初始索引（在非受控模式下）
参见受控和非受控组件和默认值文档：
在React渲染生命周期中，表单元素上的value属性将覆盖DOM中的值。对于不受控制的组件，您通常希望React指定初始值，但不控制后续更新。要处理这种情况，可以指定defaultValue属性而不是value。组件挂载后修改defaultValue属性的值不会导致DOM中的值发生任何更新。
您可以使用受控选项卡

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

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