Ловушка React useEffect не срабатывает при изменении зависимости проп

Question

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

const ImageCarousel = ({ src, photos }) => {
  const [photoList, setPhotos] = useState([]);
  const storageRef = firebase.storage().ref();
  console.log("photos prop:", photos);

  const getImage = photoId => {
    return new Promise((resolve, reject) => {
      storageRef
        .child("images/" + photoId)
        .getDownloadURL()
        .then(url => resolve(url))
        .catch(error => reject(error));
    });
  };

  useEffect(() => {
    console.log("trigger");
    Promise.all(
      photos.map(async photoId => {
        const url = await getImage(photoId);
        return url;
      })
    )
      .then(photoUrls => {
        setPhotos(photoUrls);
      })
      .catch(e => console.log(e));
  }, [photos]);

return (...)
}

Я передал подпорку фотографий в массив зависимостей моего хука useEffect , так что он должен срабатывать при смене фотографий. Я вижу, что в консоли действительно меняется реквизит, но мой хук useEffect не срабатывает, когда происходит изменение реквизита. Вот что появляется в моей консоли:

Почему useEffect не запускается дважды? Насколько я понимаю, он должен срабатывать при первом рендеринге компонента и запускаться снова каждый раз, когда изменяется photos опора.

Answer 1

Попробуйте убедиться, что ваша photos опора неизменна, то есть вы отправляете новый массив каждый раз, когда происходит изменение, и не изменяете массив

Answer 2

useEffect обновится, если вы передадите новые данные, найдите приведенный ниже пример кода и проверьте файл console.log.

    import React, { useState, useEffect } from "react";

    const EffectCheck = ({value}) => {
        console.log('Component Trigger', value);
        useEffect(() => {
            console.log('Updated Effect', value);
        },[value]);

        return (
            <div>{value}</div>
        )
    }

    export default function() {
        const [checkValue, setCheckValue] = useState(Math.random());
        const [dynamicCheckValue, setdyamicCheckValue] = useState(Math.random());

        return (
            <>
                <div><h3>No Update</h3>
                    <EffectCheck value={checkValue}/>
                </div>
                <div><h3>New Update</h3>
                    <EffectCheck value={dynamicCheckValue}/>
                </div>
                <button onClick={() => setCheckValue('Math.random()')}> No Update</button>
                <button onClick={() => setdyamicCheckValue(Math.random())}> New Update</button>
            </>
        );
    }