在父组件中设置 state 导致重新渲染时，React Carousel 旋转延迟问题？

Question

Hopefully, the title isn't too ambiguous, but I am struggling how to summarise my issue in just a few words.

What I am attempting to achieve is the one image with appear for 1.5 seconds, the opacity of image will go from 0.3 to 1 and a string of text "Completed" appears below the image, and will then rotate and move to the next image where it will have the same outcome, constantly looping through each image.

The issue is, it only seems to rotate once. It will update the styles and add the text below the image but fail to rotate.

I have a 3d carousel component that rotates the items within an array logos when a function is called rotate() .

const [rotateDeg, setRotateDeg] = useState(0);
const [currentIndex, setCurrentIndex] = useState(0);

const rotate = () => {
   const maxIndex = logos.length - 1;
   const incrementIndex = currentIndex + 1;
   const newIndex = incrementIndex > maxIndex ? 0 : incrementIndex;
   setCurrentIndex(newIndex);
   setRotateDeg(rotateDeg - 360 / logos.length);
};

return (
    <Container>
      <Carousel ref={carousel} logosLength={logos.length} rotateDeg={rotateDeg}>
        {logos.map((item, index) => {
          const { key } = item;
          return (
            <Item
              key={key}
              index={index}
              logosLength={logos.length}
              currentIndex={currentIndex}
            >
              <LoadingSpinLogo
                item={item}
                delay={1500 * (index + 1)}
                rotate={() => rotate()}
                key={key}
                isCurrent={currentIndex === index}
              />
            </Item>
          );
        })}
      </Carousel>
    </Container>
  );

The component LoadingSpinLogo is where I seem to be having an issue.

I have tried to pass different dependencies into the useEffect callback but it seems to cause weird issues with the delay.

const LoadingSpinLogo = ({ item, rotate, delay, isCurrent }) => {
  const [completed, setCompleted] = useState(false);
  const [divStyle, setDivStyle] = useState({ opacity: 0.3 });

  const props = useSpring(divStyle);

  const customStyles = {
    height: "78px",
    width: "115px",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    display: "block",
    margin: "auto"
  };

  const updateCompleted = () => {
    setCompleted(true);
    setDivStyle({ opacity: 1, from: { opacity: 0.3 } });
    rotate();
  };

  useEffect(() => {
    const timeoutID = setTimeout(function() {
      updateCompleted();
    }, delay);
    return () => {
      // Clean up the subscription
      window.clearInterval(timeoutID);
    };
  }, []);

  return (
    <LoadingSpinContainer>
      <animated.div style={props}>
        <ImageServer png={item.url} customStyles={customStyles} />
      </animated.div>
      {completed ? "Completed" : null}
    </LoadingSpinContainer>
  );
};

Here is a CodeSanbox of my components.

Any idea where I am going wrong here?

Any help would be greatly appreciated.

Answer 1

Removing the [] in your useEffect function seems to works fine for me

  useEffect(() => {
    const timeoutID = setTimeout(function() {
      updateCompleted();
    }, delay);
    return () => {
      // Clean up the subscription
      window.clearInterval(timeoutID);
    };
  }, );