React Native UseState Array Очистить

Question

У меня есть следующий код - идея заключается в создании анимированной полилинии (для карты). Я нашел некоторые вещи в inte rnet, но это было со "старыми" методами / без useEffect, useState ... Я не могу очистить массив polylinePath в else - я пытается распечатать текущую длину, но она всегда возвращает начальную длину состояния от props.Direction. Вы можете помочь мне? Я понятия не имею, почему моя AnimatedPolyline не работает.

 import React, { useState, useEffect, Fragment } from 'react';
import { Polyline } from 'react-native-maps';

export default function AnimatedPolyline(props) {
  const [polylinePath, setPolylinePath] = useState(props.Direction);

  useEffect(() => {
    const interval = setInterval(() => {
      animatePolylineStart();
   }, 70);
    return () => clearInterval(interval);
  }, [props.Direction]); //tried [], too

   const animatePolylineStart = () => {
      if (polylinePath.length < props.Direction.length) {
         const Direction = props.Direction;
         const polylinePathTemp = [
            ...Direction.slice(0, polylinePath.length - 1)
         ];

         setPolylinePath(polylinePathTemp);
      } else {
         setPolylinePath([]);
      }
   };
      return (
         <Fragment>
            {
               (polylinePath.length > 0) && <Polyline
                  coordinates={polylinePath}
                  strokeColor="#484848"
                  strokeWidth={5}
               />
            }
         </Fragment>
      );
  }

Answer 1

вернуть setPolyLinePath ([]) в методе useEffect

  useEffect(() => {
    return () => {
       clearInterval(interval);
       setPolyLinePath([])
    };
  }, []);

Answer 2

используемый эффект, когда вы используете пустой массив в качестве зависимости, он никогда не будет перемещаться, поэтому использование эффекта будет вызываться только один раз (например, componentDidMount). поэтому здесь эффект использования должен зависеть от направления.

useEffect(() => {
  const interval = setInterval(() => {
    animatePolylineStart();
 }, 70);
  return () => clearInterval(interval);
}, [props.Direction]);