fix: should not trigger isImageValid.then when src changed (#281)

* fix: should not trigger isImageValid.then when src changed

* chore: remove code

* test: update test

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: linxianxi

src/hooks/useStatus.ts

@@ -14,16 +14,21 @@ export default function useStatus({
 }) {
   const [status, setStatus] = useState<ImageStatus>(isCustomPlaceholder ? 'loading' : 'normal');
   const isLoaded = useRef(false);
-
   const isError = status === 'error';
 
   // https://github.com/react-component/image/pull/187
   useEffect(() => {
+    let isCurrentSrc = true;
     isImageValid(src).then(isValid => {
-      if (!isValid) {
+      // https://github.com/ant-design/ant-design/issues/44948
+      // If src changes, the previous setStatus should not be triggered
+      if (!isValid && isCurrentSrc) {
         setStatus('error');
       }
     });
+    return () => {
+      isCurrentSrc = false;
+    };
   }, [src]);
 
   useEffect(() => {
@@ -40,10 +45,7 @@ export default function useStatus({
 
   const getImgRef = (img?: HTMLImageElement) => {
     isLoaded.current = false;
-    if (status !== 'loading') {
-      return;
-    }
-    if (img?.complete && (img.naturalWidth || img.naturalHeight)) {
+    if (status === 'loading' && img?.complete && (img.naturalWidth || img.naturalHeight)) {
       isLoaded.current = true;
       onLoad();
     }

tests/fallback.test.tsx

@@ -2,17 +2,27 @@ import { act, fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import Image from '../src';
 
+global.lastResolve = null;
+
 jest.mock('../src/util', () => {
   const { isImageValid, ...rest } = jest.requireActual('../src/util');
 
   return {
     ...rest,
-    isImageValid: () => Promise.resolve(false),
+    isImageValid: () =>
+      new Promise(resolve => {
+        global.lastResolve = resolve;
+
+        setTimeout(() => {
+          resolve(false);
+        }, 1000);
+      }),
   };
 });
 
 describe('Fallback', () => {
   beforeEach(() => {
+    global.lastResolve = null;
     jest.useFakeTimers();
   });
 
@@ -50,18 +60,19 @@ describe('Fallback', () => {
     expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', fallback);
   });
 
-  it('should not show preview', () => {
+  it('should not show preview', async () => {
     const { container } = render(<Image src="abc" fallback={fallback} />);
 
     fireEvent.error(container.querySelector('.rc-image-img'));
-    act(() => {
+    await act(async () => {
       jest.runAllTimers();
+      await Promise.resolve();
     });
 
     expect(container.querySelector('.rc-image-mask')).toBeFalsy();
   });
 
-  it('should change image, not error', () => {
+  it('should change image, not error', async () => {
     const { container, rerender } = render(
       <Image
         width={200}
@@ -70,18 +81,25 @@ describe('Fallback', () => {
       />,
     );
 
-    fireEvent.error(container.querySelector('.rc-image-img'));
-
     rerender(
       <Image
         width={200}
         src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ"
         fallback="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
       />,
     );
-    act(() => {
+
+    // New Image should pass
+    await act(async () => {
+      await global.lastResolve(true);
+    });
+
+    // Origin one should failed
+    await act(async () => {
       jest.runAllTimers();
+      await Promise.resolve();
     });
+
     expect(container.querySelector('.rc-image-img')).toHaveAttribute(
       'src',
       'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ',