Skrrboy
@Skrrboy

Как контролировать ComponentWillUnMount при UseTransition React Spring?

Добрый день! Я использую библиотеку React Spring, а именно хук UseTransition для анимации перехода по страницам.
Ниже приведен код обёрнутых Routes для анимации:
export const AllRoutes = () => {
    const location = useLocation()
    const transitions = useTransition(location, {
        from: {
            opacity: 0,
            transform: 'translate3d(100%,0,0)',
            
        },
        enter: {
            opacity: 1,
            transform: 'translate3d(0%,0,0)'

        },
        leave: {
            opacity: 1,
            transform: 'translate3d(-100%,0,0)'

        },
    })

   return(
       transitions((props, item) => (
       <div style={{position: "absolute", left: '0', right: '0',}}>
            <animated.div style={{ ...props}}>
                <Routes location={item.pathname}>
                    <Route path="/pokemons/" element={<PokemonListPage/>}/>
                    <Route path="/pokemons/:id" element={<PokemonPage/>}/>
                    <Route path="/favorites" element={<FavoritePage/>}/>
                    <Route path="/search" element={<SearchPage/>}/>
                </Routes>
            </animated.div>
        </div>
        ))
    ) 
}

Анимация применяется, все хорошо. Но в одном из компонентов я использую ComponentWillUnMount, при этом очищается весь стор с данными для этой страницы
export const PokemonPage = () => {
    let {id} = useParams<keyof myParams>() as myParams;
    const dispatch = useAppDispatch()
    const {isLoading, isError} = useAppSelector(state => state.pokemonReducer)

    useEffect(() => {

        dispatch(isFetchingPokemon(id))
        console.log('mounted')
        return () => {
            dispatch(clearPokemon())
            console.log('unmounted')

        }
    }, [id, dispatch])
    
  
    if(isError){
        return(
            <Container>
                    <Error/>
            </Container>
        )
    }

    return (
        <Container >
            <Section>
               {isLoading ? <PageLoader/> : <Pokemon id={id}/>}
            </Section>
        </Container>
        
    )
}


Суть в том, что из за перехода анимации (opacity + transform), хук жизенного цикла срабатывает не так как нужно. При переходе на страницу PokemonPage (только другого покемона) он выполняет ComponentDidMount для новых данных, а потом выполняет ComponentWillUnMount, который был отложен.
Как пофиксить данную проблему? Может кто то сталкивался с подобным!
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы