Redux 저장소 값이 변경되면 React Tab 구성 요소가 활성 탭을 업데이트하지 않습니다.

Question

내 React 애플리케이션에서 Chakra UI Tab 구성 요소를 사용하고 있습니다. Redux에 숫자 값이 저장되어 있고 해당 값을 기반으로 활성 탭을 변경하고 싶습니다. 그런데 스토어에서 숫자 값을 업데이트해도 그에 따라 활성 탭이 변경되지 않습니다. 이 문제를 어떻게 해결할 수 있나요?

MyTabs 구성요소에 대한 코드는 다음과 같습니다.

function MyTabs() {
  const 숫자 = useSelector(selectnumber);

  console.log(번호);

  반품 (
    <탭 defaultIndex={숫자}>
      <탭 패널>
        <탭패널>
          <이미지 상자 크기="200px" fit="표지"
        </TabPanel>
        <탭패널>
          <이미지 상자 크기="200px" fit="표지"
        </TabPanel>
      </TabPanels>
      <탭목록>
        <Tab>나루토</Tab>
        <Tab>사스케</Tab>
      </탭목록>
    </탭>
  );
}

Answer 1

Redux의 값이 변경될 때 Chakra UI Tab 구성 요소의 활성 탭이 업데이트되도록 하려면 React에서 제공하는 useEffect 후크를 사용할 수 있습니다. useEffect 후크를 사용하면 특정 종속성이 변경될 때 활성 탭을 업데이트하는 등의 부작용을 수행할 수 있습니다.

MyTabs 구성 요소를 다음과 같이 수정할 수 있습니다.

으아악

이 업데이트된 코드에서는 값이 변경될 때 useEffect 후크를 사용하여 작업(updateNumber)을 전달합니다. 숫자 업데이트를 처리하려면 Redux 슬라이스에 적절한 작업과 감소 논리(selectNumber)를 구현했는지 확인하세요.

이렇게 하면 Redux에 저장된 숫자 값을 기반으로 활성 탭이 자동으로 업데이트됩니다.

Answer 2

defaultIndex 속성은 다음과 같습니다.

제어 및 제어되지 않는 구성 요소 및 기본값 ​​ 문서를 참조하세요.

제어 탭

을 사용할 수 있습니다. 으아악