Как добавить слушателя к useEffect в React Native - PullRequest
Новая
       55

Как добавить слушателя к useEffect в React Native

0 голосов
/ 26 мая 2020
• 1000 и movieTitle), которые будут переданы в качестве параметров при переходе на другой экран. Вся эта часть работает, как предполагалось, я вижу, как обновляются 2 значения для каждой итерации. из предыдущего экрана продолжает меняться, что означает, что компонент не был отключен, что может привести к утечке памяти.

Я пытался добавить прослушиватель событий, но я потерялся, извините, но я только новичок.

Это мой текущий поток:

1) на каждой итерации изображения я устанавливаю индекс изображения 

const [showMovie, setShowMovie] = useState(false);
const [imageIndex, setImageIndex] = useState("");
const [movieId, setMovieId] = useState("");
const [movieTitle, setlMovieTitle] = useState("");
....
....
setImageIndex(index);

2) Я извлекаю объект, который включает определенное c изображение из моего array topMovies 

const assetImage = topMovies[imageIndex];
const selectedImageItem = topMovies.find(
    (item) => item.backdrop_path === assetImage
  );

3) Затем я получаю и устанавливаю movieId и movieTitle с помощью useEffect. В основном он запускается на каждой итерации изображения, поскольку imageIndex постоянно меняется для любого нового загруженного изображения 

useEffect(() => {    
      setMovieId(selectedImageItem.id);
      setMovieTitle(selectedImageItem.title);    
  }, [imageIndex]);

4) это моя карусель 

<SliderBox
    images={topTenMoviesUrl}            
    onCurrentImagePressed={() => setShowMovie(true)}
    currentImageEmitter={(index) => setImageIndex(index)}            
    autoplay            
/>

Пока все хорошо.

Когда я нажимаю на изображение (setShowMov ie (true)), я ухожу от текущего экрана, но мне кажется, что карусель продолжает работать бесконечно, поскольку не отключена.

Я попытался подписаться на слушателя как следует, но я больше не устанавливаю значения и все еще вижу, как работает карусель 

const loadImageIndex = useCallback(async () => {    
      setMovieId(selectedImageItem.id);
      setMovieTitle(selectedImageItem.title);      
  }, [movieId, movieTitle]);

useEffect(() => {
    const willFocusSub = props.navigation.addListener(
      "onWillFocus",
      loadImageIndex
    );

    return () => {
      willFocusSub.remove();
    };
  }, [topTenBackdropsUrl]);

Любая помощь будет принята с благодарностью!

...