您正在设置不再安装的组件的状态。您可以使用useRef钩子来确定是否仍在安装组件，例如：

function useIsMounted() {
  const isMounted = React.useRef(true);

  React.useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  },[]);

  return isMounted;
}

以及您的ItemIndexItem ...

export default function ItemIndexItem(props) {
  const isMounted = useIsMounted();
  const [imageIsReady,setImageIsReady] = useState(false);

  ...
  img.onload = () => {
    if (isMounted.current) {
      setImageIsReady(true);
    }
  ...
}

如useRef的React文档中所述。

  

useRef返回一个可变的ref对象，其.current属性已初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

这意味着您可以使用它创建对HTML元素的引用，但也可以在该引用中放置其他变量，例如布尔值。对于我的“ useIsMounted”挂钩，它将在初始化时将其设置为已安装，而在卸载时将其设置为已卸载。

您将不再在树中设置组件的状态。我有一个小钩子实用程序可以帮助解决这种情况：

import { useCallback,useEffect,useRef } from 'react'

export const useIfMounted = () => {
  const isMounted = useRef(true)
  useEffect(
    () => () => {
      isMounted.current = false
    },[])

  const ifMounted = useCallback(
    func => {
      if (isMounted.current && func) {
        func()
      } else {
        console.log('not mounted,not doing anything')
      }
    },[])

  return ifMounted
}

export default useIfMounted

然后您可以像这样使用：

    const ifMounted = useIfMounted()

    //other code

    img.onload = () => {
      ifMounted(() => setImageIsReady(true))
    }

尽管此问题已经有两个可行的答案，但我想给出第三个（希望更简单）的答案：

您不需要另一个useRef或useIfMounted钩子-您只需要一个局部变量即可跟踪效果是否仍处于活动状态，并且效果应返回一个clenup函数，该函数可以设置此变量为false。

此外，您的效果应取决于[props.src]而不是[]，因为如果props.src发生更改，您可能要等待新图像：

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

export default function ItemIndexItem(props) {
  const [imageIsReady,setImageIsReady] = useState(false);

  useEffect(() => {
    if (imageIsReady) {
      // Oh,oh,props.src changed ...
      setImageIsReady(false);
    }
    let effectActive = true;
    let img = new Image();
    img.src = props.src;
    img.onload = () => {
      // Only call setImageIsReady if the effect is still active!
      if (effectActive) {
        setImageIsReady(true);
      }
    };
    // The cleanup function below will be called,// when either the ItemIndexItem component is
    // unmounted or when props.src changes ...
    return () => { effectActive = false; }
  });

  if (!imageIsReady) return null;

  return (
    <div>
      <img src={props.src} />
    </div>
  );
}

类似的问题，我用这个解决了。

useEffect(() => {
      let img = new Image()
      //only continue if img is not null
      if (img)
        img.onload = () => {
          setHeight(img.height)
          setWidth(img.width)
          img.src = src
        }
    },[src])