当 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>