当 prop 依赖项更改时，React useEffect 钩子不会触发

Question

我正在使用 useEffect 挂钩根据传入的 photos 道具中的数据进行 API 调用。

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

这可能不是最正确的答案，但我已经尝试过了，它确实有效。帽子提示https://dev.to/stephane/how-to-make-sure-useeffect-catches-array-changes-fm3

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));
}, [JSON.stringify(photos])); // stringify the array used as the trigger, and it'll catch the change

Answer 3

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>
            </>
        );
    }