Axios 调用停止转换

Question

所以我的 axios 调用停止了当前正在进行的转换，如以下视频所示： https://youtu.be/5BCSvJpoMcs

如何防止 axios 这样做？那是 nextSlide 函数的代码

const nextSlide = () => {
        if (isMoreItems) {
            setCarouselPage(carouselPage + 1)
            if (carouselPage === recentQuizes.length - 1) {
                apiCall(skip, limit).then(data => {
                    if (data.length > 0) {
                        setSkip(skip + limit)
                        setRecentQuizes([...recentQuizes, data])
                    }
                    if (data.length < 4) {
                        setIsMoreItems(false)
                    }
                })
            }
        }
    }

并且 carouselPage 被发送到样式组件，该组件只是将 transform 属性设置为 translateX carouselPage * -100%

有人知道如何解决这个问题吗？

Answer 1

所以我通过添加一个新的 Wrapper 来修复它，现在它看起来像这样

<Wrapper carouselPage={carouselPage}>
   {recentQuizes.length > 0 &&
      recentQuizes.map(item => (
         <Container key={item[0]._id}>
            {item.map(quiz => (
               <Tile
                  key={quiz._id}
                  name={quiz.name}
                  author={quiz.author}
                  views={quiz.views}
               />
         ))}
      </Container>
   ))}
</Wrapper>

Wrapper 样式是

const Wrapper = styled.div`
    height: inherit;
    min-width: 100%;
    transition: 1s;
    transform: ${props =>
        props.carouselPage &&
        `translateX(-${props.carouselPage * 25}%)`};
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`

Axios 调用停止转换

Axios call stops a transition

css-transitions

reactjs

axios