Die React Tab-Komponente aktualisiert den aktiven Tab nicht, wenn sich der Redux-Store-Wert ändert

Question

Ich verwende die Chakra UI Tab-Komponente in meiner React-Anwendung. Ich habe einen numerischen Wert in Redux gespeichert und möchte die aktive Registerkarte basierend auf diesem Wert ändern. Wenn ich jedoch den Zahlenwert im Shop aktualisiere, ändert sich die aktive Registerkarte nicht entsprechend. Wie kann ich dieses Problem lösen?

Hier ist der Code für die Komponente MyTabs

function MyTabs() {
  const number = useSelector(selectnumber);

  console.log(Nummer);

  zurückkehren (
    <Tabs defaultIndex={number}>
      <TabPanels>
        <TabPanel>
          <Image boxSize="200px" fit="cover"
        </TabPanel>
        <TabPanel>
          <Image boxSize="200px" fit="cover"
        </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>