React Carousel вращается при задержке при установке состояния в родительском компоненте, вызывающем повторную визуализацию? - PullRequest
Новая
       101

React Carousel вращается при задержке при установке состояния в родительском компоненте, вызывающем повторную визуализацию?

0 голосов
/ 21 июня 2020

Надеюсь, название не слишком двусмысленное, но я изо всех сил пытаюсь описать мою проблему в нескольких словах.

Я пытаюсь достичь одного изображения, которое отображается в течение 1,5 секунд, непрозрачность изображения будет go от 0,3 до 1, а под изображением появится строка текста «Завершено», которая затем повернется и переместится к следующему изображению, где оно будет иметь тот же результат, постоянно просматривая каждое изображение.

Проблема в том, что он вращается только один раз. Он обновит стили и добавит текст под изображением, но не повернется.

У меня есть компонент трехмерной карусели, который вращает элементы в массиве logos при вызове функции 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>
  );

В компоненте LoadingSpinLogo у меня, похоже, возникла проблема.

Я пытался передать различные зависимости в обратный вызов useEffect, но, похоже, это вызывает странные проблемы с 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>
  );
};

Вот CodeSanbox моих компонентов.

Есть идеи, где я здесь ошибаюсь?

Любая помощь будет очень признателен.

1 Ответ

0 голосов
/ 21 июня 2020

Удаление [] в вашей функции useEffect кажется мне отлично работает 


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