React Native UseState 数组清除

Question

I have the following code - the idea is to create an animated polyline (for a map). I found some stuff in the internet, but it was with the "old" methods/without useEffect , useState ... I can´t clear the polylinePath array in the else - I am trying to print out the current length, but it always returns the initial state length from props.Direction . Can you help me? I have no idea why my AnimatedPolyline isn´t working.

 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

in use effect when you use an empty array as a dependency it will never move so use effect will be called only one time (like componentDidMount). so here use effect should depend on Direction.

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

Answer 2

return setPolyLinePath([]) in useEffect method

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