Redux ストアの値が変更されたときに React Tab コンポーネントがアクティブなタブを更新しない

Question

React アプリケーションで Chakra UI Tab コンポーネントを使用しています。 Redux に数値が保存されており、その値に基づいてアクティブなタブを変更したいと考えています。ただし、ストア内の数値を更新しても、アクティブなタブはそれに応じて変更されません。この問題はどうすれば解決できますか?

MyTabs コンポーネントのコードは次のとおりです。

function MyTabs() {
  const 番号 = useSelector(selectnumber);

  コンソール.ログ(番号);

  戻る （
    <タブのデフォルトインデックス={数値}>
      <タブパネル>
        <タブパネル>
          <Image boxSize="200px" fit="cover" src="" />
        </TabPanel>
        <タブパネル>
          <Image boxSize="200px" fit="cover" src="" />
        </TabPanel>
      </TabPanels>
      <タブリスト>
        <Tab>ナルト</Tab>
        <Tab>サスケ</Tab>
      </TabList>
    </タブ>
  );
}

Answer 1

Redux の値が変更されたときに Chakra UI Tab コンポーネントのアクティブなタブが更新されるようにするには、React が提供する useEffect フックを使用できます。 useEffect フックを使用すると、特定の依存関係が変更されたときにアクティブなタブを更新するなどの副作用を実行できます。

MyTabs コンポーネントは次のように変更できます:

リーリー

この更新されたコードでは、useEffect フックを使用して、値が変更されたときに操作 (updateNumber) をディスパッチします。数値更新を処理するために、Redux スライスに適切な操作とリデューサー ロジック (selectNumber) が実装されていることを確認してください。

これを行うと、Redux に保存されている数値に基づいてアクティブなタブが自動的に更新されます。

Answer 2

defaultIndex プロパティは次のとおりです:

制御コンポーネントと非制御コンポーネント および デフォルト値 ドキュメント:

を参照してください。

制御されたタブを使用できます リーリー