fix(): fixes setState on didUpdate error

GeekyAnts · Jul 25, 2019 · ddae6e4 · ddae6e4
1 parent 995d64c
commit ddae6e4
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 80 deletions.
diff --git a/src/basic/DeckSwiper.js b/src/basic/DeckSwiper.js
@@ -25,9 +25,72 @@ class DeckSwiper extends Component {
       disabled: this.props.dataSource.length === 0,
       lastCard: this.props.dataSource.length === 1
     };
+    this.setPanresponder();
   }
 
-  componentDidMount() {
+  componentDidUpdate({ dataSource }) {
+    if (dataSource.length !== this.props.dataSource.length) {
+      if (dataSource.length <= 1) {
+        this.setState({
+          ...this.state,
+          selectedItem: dataSource[0],
+          selectedItem2: undefined,
+          disabled: dataSource.length === 0,
+          lastCard: dataSource.length === 1
+        });
+        return;
+      }
+
+      const visibleIndex = dataSource.indexOf(this.state.selectedItem);
+      const currentIndex = visibleIndex < 0 ? visibleIndex + 1 : visibleIndex;
+      const nextIndex =
+        currentIndex + 1 === dataSource.length ? 0 : currentIndex + 1;
+
+      this.setState({
+        selectedItem: dataSource[currentIndex],
+        selectedItem2: dataSource[nextIndex]
+      });
+    }
+  }
+
+  getInitialStyle = () => {
+    return {
+      topCard: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0
+      }
+    };
+  };
+
+  getCardStyles() {
+    const { pan, enter } = this.state;
+
+    const [translateX, translateY] = [pan.x, pan.y];
+    // let [translateX, translateY] = [pan2.x, pan2.y];
+
+    const rotate = pan.x.interpolate({
+      inputRange: [-700, 0, 700],
+      outputRange: ['-10deg', '0deg', '10deg']
+    });
+
+    const opacity = pan.x.interpolate({
+      inputRange: [-320, 0, 320],
+      outputRange: [0.9, 1, 0.9]
+    });
+    const scale = enter;
+
+    const animatedCardStyles = {
+      transform: [{ translateX }, { translateY }, { rotate }],
+      opacity
+    };
+    const animatedCardStyles2 = { transform: [{ scale }] };
+
+    return [animatedCardStyles, animatedCardStyles2];
+  }
+
+  setPanresponder() {
     this._panResponder = PanResponder.create({
       onMoveShouldSetResponderCapture: () => true,
       onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
@@ -98,68 +161,6 @@ class DeckSwiper extends Component {
     });
   }
 
-  componentDidUpdate({ dataSource }) {
-    if (dataSource.length !== this.props.dataSource.length) {
-      if (dataSource.length <= 1) {
-        this.setState({
-          ...this.state,
-          selectedItem: dataSource[0],
-          selectedItem2: undefined,
-          disabled: dataSource.length === 0,
-          lastCard: dataSource.length === 1
-        });
-        return;
-      }
-
-      const visibleIndex = dataSource.indexOf(this.state.selectedItem);
-      const currentIndex = visibleIndex < 0 ? visibleIndex + 1 : visibleIndex;
-      const nextIndex =
-        currentIndex + 1 === dataSource.length ? 0 : currentIndex + 1;
-
-      this.setState({
-        selectedItem: dataSource[currentIndex],
-        selectedItem2: dataSource[nextIndex]
-      });
-    }
-  }
-
-  getInitialStyle = () => {
-    return {
-      topCard: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0
-      }
-    };
-  };
-
-  getCardStyles() {
-    const { pan, enter } = this.state;
-
-    const [translateX, translateY] = [pan.x, pan.y];
-    // let [translateX, translateY] = [pan2.x, pan2.y];
-
-    const rotate = pan.x.interpolate({
-      inputRange: [-700, 0, 700],
-      outputRange: ['-10deg', '0deg', '10deg']
-    });
-
-    const opacity = pan.x.interpolate({
-      inputRange: [-320, 0, 320],
-      outputRange: [0.9, 1, 0.9]
-    });
-    const scale = enter;
-
-    const animatedCardStyles = {
-      transform: [{ translateX }, { translateY }, { rotate }],
-      opacity
-    };
-    const animatedCardStyles2 = { transform: [{ scale }] };
-
-    return [animatedCardStyles, animatedCardStyles2];
-  }
-
   _resetState() {
     this.state.pan.setValue({ x: 0, y: 0 });
     this.state.enter.setValue(0.8);

diff --git a/src/basic/Picker.ios.js b/src/basic/Picker.ios.js
@@ -20,31 +20,42 @@ import { Right } from './Right';
 import { Body } from './Body';
 
 class PickerNB extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalVisible: false,
-      currentLabel: this.getLabel(props),
-      dataSource: this.getChildren(props.children)
-    };
-  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    let nextDS;
+    if (nextProps.children && !Array.isArray(nextProps.children)) {
+      nextDS = [].concat(nextProps.children);
+      // eslint-disable-next-line prefer-spread
+    } else nextDS = [].concat.apply([], nextProps.children);
+
+    const item = _.find(
+      nextProps.children,
+      child => child.props.value === nextProps.selectedValue
+    );
 
-  componentDidUpdate(nextProps) {
-    const currentLabel = this.state.currentLabel;
-    const nextLabel = this.getLabel(nextProps);
-    const currentDS = this.state.dataSource;
-    const nextDS = this.getChildren(nextProps.children);
+    const currentLabel = prevState.currentLabel;
+    const nextLabel = _.get(item, 'props.label');
+    const currentDS = prevState.dataSource;
 
     if (currentLabel !== nextLabel) {
-      this.setState({
+      return {
         currentLabel: nextLabel
-      });
+      };
     }
     if (currentDS !== nextDS) {
-      this.setState({
+      return {
         dataSource: nextDS
-      });
+      };
     }
+    return null;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalVisible: false,
+      currentLabel: this.getLabel(props),
+      dataSource: this.getChildren(props.children)
+    };
   }
 
   getInitialStyle = () => {