fix: resolve scroll key against latest data (#376)

* fix: resolve scroll key against latest data

* perf: cache resolved scroll index

* refactor: simplify scroll key retry

Author: zombieJ

src/hooks/useScrollTo.tsx

@@ -64,6 +64,7 @@ export default function useScrollTo<T>(
   const [syncState, setSyncState] = React.useState<{
     times: number;
     index: number;
+    key?: React.Key;
     offset: ScrollOffset;
     originAlign: ScrollAlign;
     targetAlign?: 'top' | 'bottom';
@@ -81,7 +82,11 @@ export default function useScrollTo<T>(
 
       collectHeight();
 
-      const { targetAlign, originAlign, index, offset: rawOffset } = syncState;
+      const { targetAlign, originAlign, offset: rawOffset } = syncState;
+      const index =
+        syncState.index >= 0
+          ? syncState.index
+          : data.findIndex((item) => getKey(item) === syncState.key);
       const mergedAlign = targetAlign || originAlign;
       const offset = getOffset(rawOffset, { getSize, align: mergedAlign });
 
@@ -91,7 +96,7 @@ export default function useScrollTo<T>(
       let targetTop: number | null = null;
 
       // Go to next frame if height not exist
-      if (height) {
+      if (height && index >= 0) {
         // Get top & bottom
         let stackTop = 0;
         let itemTop = 0;
@@ -157,12 +162,13 @@ export default function useScrollTo<T>(
 
       // Trigger next effect
       if (needCollectHeight) {
-        setSyncState({
-          ...syncState,
-          times: syncState.times + 1,
+        setSyncState((prev) => ({
+          ...prev,
+          times: prev.times + 1,
+          index,
           targetAlign: newTargetAlign,
           lastTop: targetTop,
-        });
+        }));
       }
     } else if (process.env.NODE_ENV !== 'production' && syncState?.times === MAX_TIMES) {
       warning(
@@ -187,19 +193,22 @@ export default function useScrollTo<T>(
       syncScrollTop(arg);
     } else if (arg && typeof arg === 'object') {
       let index: number;
+      let key: React.Key;
       const { align } = arg;
 
       if ('index' in arg) {
         ({ index } = arg);
       } else {
-        index = data.findIndex((item) => getKey(item) === arg.key);
+        key = arg.key;
+        index = data.findIndex((item) => getKey(item) === key);
       }
 
       const { offset: rawOffset = 0 } = arg;
 
       setSyncState({
         times: 0,
         index,
+        key,
         offset: rawOffset,
         originAlign: align,
       });

tests/scroll.test.js

@@ -208,6 +208,31 @@ describe('List.Scroll', () => {
       expect(container.querySelector('ul').scrollTop).toEqual(520);
     });
 
+    it('refreshes key index when data changes', () => {
+      const ref = React.createRef();
+
+      function Demo() {
+        const [data, setData] = React.useState(genData(1));
+
+        return (
+          <>
+            <button
+              onClick={() => {
+                setData(genData(100));
+                ref.current.scrollTo({ key: '30', align: 'top' });
+              }}
+            />
+            {genNode({ itemHeight: 20, height: 100, data, ref })}
+          </>
+        );
+      }
+
+      const { container } = render(<Demo />);
+      fireEvent.click(container.querySelector('button'));
+
+      expect(container.querySelector('ul').scrollTop).toEqual(600);
+    });
+
     it('supports function offset with getSize info', () => {
       const { scrollTo, container } = presetList();
       const offset = jest.fn(({ getSize }) => getSize('2').bottom);