fix: Do not crash when list removed

Author: zombieJ

.eslintrc.js

@@ -9,5 +9,6 @@ module.exports = {
     'react/no-find-dom-node': 0,
     'no-dupe-class-members': 0,
     'react/sort-comp': 0,
+    'no-confusing-arrow': 0,
   },
 };

examples/basic.tsx

@@ -45,6 +45,7 @@ const TYPES = [
 ];
 
 const Demo = () => {
+  const [destroy, setDestroy] = React.useState(false);
   const [type, setType] = React.useState('dom');
   const listRef = React.useRef<List>(null);
 
@@ -66,26 +67,6 @@ const Demo = () => {
           </label>
         ))}
 
-        <List
-          ref={listRef}
-          data={data}
-          height={200}
-          itemHeight={30}
-          itemKey="id"
-          style={{
-            border: '1px solid red',
-            boxSizing: 'border-box',
-          }}
-        >
-          {(item, _, props) =>
-            (type === 'dom' ? (
-              <ForwardMyItem {...item} {...props} />
-            ) : (
-              <TestItem {...item} {...props} />
-            ))
-          }
-        </List>
-
         <button
           type="button"
           onClick={() => {
@@ -138,6 +119,41 @@ const Demo = () => {
         >
           Scroll To key 50 (auto)
         </button>
+
+        <button
+          type="button"
+          onClick={() => {
+            listRef.current.scrollTo({
+              index: 50,
+              align: 'top',
+            });
+            setDestroy(true);
+          }}
+        >
+          Scroll To remove
+        </button>
+
+        {!destroy && (
+          <List
+            ref={listRef}
+            data={data}
+            height={200}
+            itemHeight={30}
+            itemKey="id"
+            style={{
+              border: '1px solid red',
+              boxSizing: 'border-box',
+            }}
+          >
+            {(item, _, props) =>
+              type === 'dom' ? (
+                <ForwardMyItem {...item} {...props} />
+              ) : (
+                <TestItem {...item} {...props} />
+              )
+            }
+          </List>
+        )}
       </div>
     </React.StrictMode>
   );

package.json

@@ -42,7 +42,10 @@
     "react-dom": "*"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.10",
+    "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.3",
+    "@types/raf": "^3.4.0",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",

src/List.tsx

@@ -132,6 +132,8 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
     data: [],
   };
 
+  rafId: number;
+
   listRef = React.createRef<HTMLElement>();
 
   itemElements: { [index: number]: HTMLElement } = {};
@@ -376,6 +378,10 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
     this.cachedProps = this.props;
   }
 
+  componentWillUnmount() {
+    raf.cancel(this.rafId);
+  }
+
   /**
    * Phase 2: Trigger render since we should re-calculate current position.
    */
@@ -435,8 +441,8 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
     }
 
     const item = data[index];
+    /* istanbul ignore next */
     if (item === undefined) {
-      /* istanbul ignore next */
       console.error('Not find index item. Please report this since it is a bug.');
       return null;
     }
@@ -470,7 +476,9 @@ class List<T = any> extends React.Component<ListProps<T>, ListState<T>> {
   };
 
   public scrollTo = (arg0: number | ScrollConfig) => {
-    raf(() => {
+    raf.cancel(this.rafId);
+
+    this.rafId = raf(() => {
       // Number top
       if (typeof arg0 === 'object') {
         const { isVirtual } = this.state;

tests/__mocks__/raf.js

@@ -1,3 +1,9 @@
-export default function raf(callback) {
-  setTimeout(callback);
+function raf(callback) {
+  return setTimeout(callback);
 }
+
+raf.cancel = id => {
+  clearTimeout(id);
+};
+
+export default raf;

tests/scroll.test.js

@@ -89,6 +89,12 @@ describe('List.Scroll', () => {
           });
         });
 
+        it('not crash', () => {
+          listRef.current.scrollTo({ ...scrollConfig, align: 'top' });
+          wrapper.unmount();
+          jest.runAllTimers();
+        });
+
         it('top', () => {
           listRef.current.scrollTo({ ...scrollConfig, align: 'top' });
           jest.runAllTimers();