[chore] fix inconsistent component state updates

React component state updates using setState may
asynchronously update this.props and this.state, thus it is
not safe to use either of the two when calculating the new
state passed to setState, and instead the callback-based
variant should be used instead.

src/components/box-editor/src/box-editor/box-editor.component.tsx

@@ -244,51 +244,51 @@ export class BoxEditor extends React.Component<typings.Props, typings.State> {
     const diffY = event.clientY - this.lastY;
     switch (this.currentHolding) {
       case 'marginLeft':
-        this.setState({
-          marginLeft: this.state.marginLeft - diffX
-        });
+        this.setState(state => ({
+          marginLeft: state.marginLeft - diffX
+        }));
         this.props.onChange(this.currentHolding, this.state.marginLeft);
         break;
       case 'paddingLeft':
-        this.setState({
-          paddingLeft: this.state.paddingLeft - diffX
-        });
+        this.setState(state => ({
+          paddingLeft: state.paddingLeft - diffX
+        }));
         this.props.onChange(this.currentHolding, this.state.paddingLeft);
         break;
       case 'marginRight':
-        this.setState({
-          marginRight: this.state.marginRight + diffX
-        });
+        this.setState(state => ({
+          marginRight: state.marginRight + diffX
+        }));
         this.props.onChange(this.currentHolding, this.state.marginRight);
         break;
       case 'paddingRight':
-        this.setState({
-          paddingRight: this.state.paddingRight + diffX
-        });
+        this.setState(state => ({
+          paddingRight: state.paddingRight + diffX
+        }));
         this.props.onChange(this.currentHolding, this.state.paddingRight);
         break;
       case 'marginTop':
-        this.setState({
-          marginTop: this.state.marginTop - diffY
-        });
+        this.setState(state => ({
+          marginTop: state.marginTop - diffY
+        }));
         this.props.onChange(this.currentHolding, this.state.marginTop);
         break;
       case 'paddingTop':
-        this.setState({
-          paddingTop: this.state.paddingTop - diffY
-        });
+        this.setState(state => ({
+          paddingTop: state.paddingTop - diffY
+        }));
         this.props.onChange(this.currentHolding, this.state.paddingTop);
         break;
       case 'marginBottom':
-        this.setState({
-          marginBottom: this.state.marginBottom + diffY
-        });
+        this.setState(state => ({
+          marginBottom: state.marginBottom + diffY
+        }));
         this.props.onChange(this.currentHolding, this.state.marginBottom);
         break;
       case 'paddingBottom':
-        this.setState({
-          paddingBottom: this.state.paddingBottom + diffY
-        });
+        this.setState(state => ({
+          paddingBottom: state.paddingBottom + diffY
+        }));
         this.props.onChange(this.currentHolding, this.state.paddingBottom);
         break;
     }

src/components/tree/src/tree-node/tree-node.component.tsx

@@ -8,17 +8,17 @@ export class TreeNode extends React.Component<typings.Props, typings.State> {
   public state = new typings.State();
 
   public componentWillMount() {
-    this.setState({
-      showChildren: this.props.defaultExpendAll || this.props.showChildren
-    });
+    this.setState((_, props) => ({
+      showChildren: props.defaultExpendAll || props.showChildren
+    }));
   }
 
   public handleContainerClick = (event: Event) => {
     this.props.onClick(event);
     if (!this.props.toggleByArrow) {
-      this.setState({
-        showChildren: !this.state.showChildren
-      });
+      this.setState(state => ({
+        showChildren: !state.showChildren
+      }));
       if (this.props.onToggleShow) {
         this.props.onToggleShow(event);
       }
@@ -28,9 +28,9 @@ export class TreeNode extends React.Component<typings.Props, typings.State> {
   public handleArrowClick = (event: Event) => {
     event.stopPropagation();
 
-    this.setState({
-      showChildren: !this.state.showChildren
-    });
+    this.setState(state => ({
+      showChildren: !state.showChildren
+    }));
     if (this.props.onToggleShow) {
       this.props.onToggleShow(event);
     }