put api injection into componentWillMount, not render

javascripts/src/components/registration_page/RegistrationWizard.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import {observer, inject} from 'mobx-react'
 import NonprofitInfoPanel from './NonprofitInfoPanel'
-import {action,  observable, computed} from 'mobx';
+import {action,  observable, computed, runInAction} from 'mobx';
 import {Wizard} from '../common/wizard/Wizard'
 
 import {Form} from 'mobx-react-form';
@@ -165,15 +165,16 @@ export class InnerRegistrationWizard extends React.Component<RegistrationWizardP
     this.registrationWizardState.initialize()
   }
 
+  componentWillMount()
+  {
+    runInAction(() => {
+      this.form.nonprofitApi = this.props.ApiManager.get(NonprofitApi)
+      this.form.signinApi = this.props.ApiManager.get(WebUserSignInOut)
+    })
+  }
+
 
   render() {
-    if (!this.form.nonprofitApi) {
-      this.form.nonprofitApi = this.props.ApiManager.get(NonprofitApi)
-
-    }
-    if(!this.form.signinApi){
-      this.form.signinApi = this.props.ApiManager.get(WebUserSignInOut)
-    }
 
     return <Wizard wizardState={this.registrationWizardState} disableTabs={this.form.submitting}>
       <NonprofitInfoPanel tab={this.registrationWizardState.tabsByName['nonprofitTab']}

javascripts/src/components/session_login_page/SessionLoginForm.tsx

@@ -7,7 +7,7 @@ import {Validations} from "../../lib/vjf_rules";
 import {WebLoginModel, WebUserSignInOut} from "../../lib/api/sign_in";
 
 import {HoudiniForm, StaticFormToErrorAndBackConverter} from "../../lib/houdini_form";
-import {observable, action} from 'mobx'
+import {observable, action, runInAction} from 'mobx'
 import {ApiManager} from "../../lib/api_manager";
 import {BasicField} from "../common/fields";
 import ProgressableButton from "../common/ProgressableButton";
@@ -91,14 +91,16 @@ class InnerSessionLoginForm extends React.Component<SessionLoginFormProps & Inje
     this.form = new SessionPageForm({fields: FieldDefinitions})
   }
 
+  componentWillMount(){
+    runInAction(() => {
+      this.form.signinApi = this.props.ApiManager.get(WebUserSignInOut)
+    })
+  }
+
   @observable form: SessionPageForm
 
   render() {
 
-    if(!this.form.signinApi){
-      this.form.signinApi = this.props.ApiManager.get(WebUserSignInOut)
-    }
-
     let errorDiv = !this.form.isValid || this.form.hasServerError ? <div className="form-group has-error"><div className="help-block" role="alert">{this.form.serverError}</div></div> : ''
 
     return <form onSubmit={this.form.onSubmit}>