Fix all setState calls after unmounted errors. Decided to create our own flag rather then using a cancellablePromise since there was little to be gained from this alternative

1 files changed, 12 insertions, 5 deletions

diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 44f3fc4a8..9078f7fe1 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -30,8 +30,10 @@ interface TokenAmountInputState {
 }
 
 export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> {
+    private _isUnmounted: boolean;
     constructor(props: TokenAmountInputProps) {
         super(props);
+        this._isUnmounted = false;
         const defaultAmount = new BigNumber(0);
         this.state = {
             balance: defaultAmount,
@@ -43,6 +45,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
         // tslint:disable-next-line:no-floating-promises
         this._fetchBalanceAndAllowanceAsync(this.props.token.address, this.props.userAddress);
     }
+    public componentWillUnmount() {
+        this._isUnmounted = true;
+    }
     public componentWillReceiveProps(nextProps: TokenAmountInputProps) {
         if (
             nextProps.userAddress !== this.props.userAddress ||
@@ -107,10 +112,12 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             userAddress,
             tokenAddress,
         );
-        this.setState({
-            balance,
-            allowance,
-            isBalanceAndAllowanceLoaded: true,
-        });
+        if (!this._isUnmounted) {
+            this.setState({
+                balance,
+                allowance,
+                isBalanceAndAllowanceLoaded: true,
+            });
+        }
     }
 }