componentWillReceiveProps fix

Author: Artem

src/image-viewer.component.tsx

@@ -52,25 +52,25 @@ export default class ImageViewer extends React.Component<Props, State> {
     this.init(this.props);
   }
 
-  public componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.index !== this.state.currentShowIndex) {
-      this.setState(
-        {
-          currentShowIndex: nextProps.index
-        },
-        () => {
-          // 立刻预加载要看的图
-          this.loadImage(nextProps.index || 0);
-
-          this.jumpToCurrentImage();
-
-          // 显示动画
-          Animated.timing(this.fadeAnim, {
-            toValue: 1,
-            duration: 200
-          }).start();
-        }
-      );
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    if (nextProps.index !== prevState.prevIndexProp) {
+      return { currentShowIndex: nextProps.index, prevIndexProp: nextProps.index };
+    }
+    return null;
+  }
+
+  public componentDidUpdate(prevProps: Props, prevState: State) {
+    if (prevProps.index !== this.props.index) {
+      // 立刻预加载要看的图
+      this.loadImage(this.props.index || 0);
+
+      this.jumpToCurrentImage();
+
+      // 显示动画
+      Animated.timing(this.fadeAnim, {
+        toValue: 1,
+        duration: 200
+      }).start();
     }
   }
 
@@ -97,6 +97,7 @@ export default class ImageViewer extends React.Component<Props, State> {
     this.setState(
       {
         currentShowIndex: nextProps.index,
+        prevIndexProp: nextProps.index || 0,
         imageSizes
       },
       () => {

src/image-viewer.type.ts

@@ -229,6 +229,11 @@ export class State {
    */
   public currentShowIndex?: number = 0;
 
+  /**
+   * Used to detect if parent component applied new index prop
+   */
+  public prevIndexProp?: number = 0;
+
   /**
    * 图片拉取是否完毕了
    */