ヌルは、私はビューでクラスを実行しようとしているが、私は次のエラーを取得するオブジェクト（「this.state.token」を評価）リアクト - ネイティブ

Question

ではありませんこれは、レンダリングしようとしているイムクラスです

'）this.state.token'：

class BackEnd extends Component{ 
render() { 
    if (this.state.token) { 
    return (
    <ListView dataSource={this.state.users} 
      renderRow={this.renderUsers} 
      style={styles.listView} /> 
); 
    } else { 
    return (
    <View style={styles.container}> 
     <Text style={styles.welcome}> 
     Mobil 
     </Text> 
     <TextInput 
     style={styles.textInput} 
     onChangeText={(username) => this.setState({'username': username})} 
     value= {this.state.username} 
     /> 
     <TextInput 
     secureTextEntry={true} 
     style={styles.textInput} 
     onChangeText={(password) => this.setState({'password': password})} 
     value={this.state.password} 
     /> 
     <TouchableHighlight style={styles.button} onPress={() => this.getToken(config.client_id, config.client_key, this.state.username, this.state.password)}> 
     <Text>Login</Text> 
     </TouchableHighlight> 
     <Text style={styles.error}> 
     {this.state.error} 
     </Text> 
    </View> 
)}; 
} 
} 

私だ私のコンポーネントに次のコード：

export default class AwesomeProject extends Component { 

constructor(props, context) { 
super(props, context) 
this.tabarRef = null 
this.state = { 
    tab: 'item1', 
    text: '', 
    selected2: 'key1', 
    color: 'red', 
    mode: Picker.MODE_DIALOG, 
    token: '', 
    username: '', 
    password: '', 
    error: '', 
    users: new ListView.DataSource(
    { rowHasChanged: (row1, row2) => row1 !== row2, } 
), 
}; 
// this.getToken() = this.getToken().bind(this) 
} 


componentDidMount() { 
    this.loadInitialState().done(); 
} 

async loadInitialState() { 
try { 
let token = await AsyncStorage.getItem('token'); 
if (token !== null) { 
this.setState({ token: token }); 
this.getData(this.state.token); 
} else { 
this.setState({ 'error': 'LogIn' }) 
} 

} catch (error) { 

    } 
} 

async getToken (client_id, client_key, username, password) { 

    var data = new FormData(); 
    data.append('grant_type', 'password'); 
    data.append('client_id', client_id); 
    data.append('client_secret', client_key); 
    data.append('username', username); 
    data.append('password', password); 

    let response = await fetch('https://localhost:8000/o/applications/1/', { 
     method: 'POST', 
     headers: { 
      'Accept': 'application/json', 
      'Origin': '', 
      'Host': 'your-domain.com', 
    }, 
     body: data 
     }); 
     let responseJson = await response.json(); 
     if (responseJson.hasOwnProperty('error')) { 
     this.setState({'error': responseJson.error}); 
     } else { 
     AsyncStorage.setItem('token', responseJson.access_token); 
     this.setState({'token': responseJson.access_token}); 
     this.getData(this.state.token); 
    } 
    } 

async getData(token) { 

    let response = await fetch('https://localhost:8000/o/applications/1/', 
          { 
          method: 'GET', 
          headers: { 
           'Accept': 'application/json', 
           'Authorization': 'Bearer '+token, 
           'Host': 'your-domain.com', 
          }, 
          } 
         ); 
    let responseJson = await response.json(); 
    if (responseJson.hasOwnProperty('detail')) { 
    this.setState({'error': responseJson.detail}); 
    } else { 
    this.setState({'user': this.state.users.cloneWithRows(responseJson)}); 
    } 

} 

は、私は私のレンダリング機能では、このようなバックエンドクラスを呼び出す：

case 'item2': 
    content = 
     <View> 
     <BackEnd/> 
     <Text style={styles.instructions}> Hier komt het 
(school)rooster</Text> 
     </View> 
    break 

スタックトレース：

nullが Cをレンダリング （ 'this.state.token' を評価）オブジェクトではありません：\ Users \ユーザーマンスールを\ Documents \ AwesomeProject \ src \ Smartplanner.js：64：21 C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js ：1045：14 measureLifeCyclePerf C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\のsrc \レンダラーが共有\スタック\の競合回避の\のReactCompositeComponent.jsを\：85：11 _renderValidatedComponentWithoutOwnerOrContext C：\ユーザーは、マンスール\ドキュメント\ \ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラーが共有\ \ stack \ reconciler \ reactCompositeComponent.js：1045：8 _renderValidatedComponent C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js： 1075：10 performInitialMount C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponent.js：484：24 mountComponent C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ライブラリ\レンダラ\のsrc \レンダラーが共有\スタック\の競合回避の\のReactCompositeComponent.jsを\：346：40 mountComponent C：\ユーザーは、マンスール\ドキュメント\ \ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラーが共有\ \ stack \ reconciler \ ReactReconciler.js：62：6 updateChild C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactChildReconciler.js： 157：10 _reconcilerUpdateChildren C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactMultiChild.js：212：10 _updateChildren C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactMultiChild.js：345：6 updateChildren C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactMultiChild.js：331：25 receiveComponent 130：24 receiveComponent C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥native¥ReactNativeBaseComponent.js： \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ src \ renderers \ shared \ stack \ reconciler \ ReactCompositeComponentにあります。JS：982：8 _performComponentUpdate C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponent.js：944：34 updateComponent C ：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js：847：8 receiveComponent C：\ Users \ Mansur \ Documents \ AwesomeProject 710：6 receiveComponent C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Ribraries¥Renderer¥src¥renderers¥reactCompositeComponent.js：レンダラー\ src \ renderers \ shared \ stack \ reconciler \ ReactReconciler.js：163：38 upd C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactChildReconciler.js：143：10 _reconcilerUpdateChildren C：\ Users \ Mansur \ C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactMultiChild.js：212：10 _updateChildren \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactMultiChild.js：345：6 updateChildren C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥共有\ stack \ reconciler \ ReactMultiChild.js：331：25 receiveComponent C：\ Users \ Mansur \ D ocuments \ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \ネイティブ\ ReactNativeBaseComponent.js \レンダラー：130：24 receiveComponent C：\ Users \ユーザーマンスール\ドキュメントは、\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ163：38 _updateRenderedComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\ \のsrc \レンダラーは\スタック\競合回避\ ReactReconciler.js共有、\しますreconciler \ ReactCompositeComponent.js：982：8 _performComponentUpdate C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js：944：34 updateComponent C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ L ibraries \レンダラ\のsrc \レンダラーは、共有\スタック\の競合回避の\のReactCompositeComponent.jsを\：847：8 receiveComponent C：ユーザーがマンスール\ドキュメント\ \ \ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラーが共有\します\ Stack \ reconciler \ ReactCompositeComponent.js：710：6 receiveComponent C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactReconciler.js： 163：38 updateChildren C：\ユーザー\マンスール\ドキュメント\ AwesomeProject \ node_modules \反応ネイティブ\ライブラリ\レンダラ\ SRC \レンダラ\共有\スタック\リコンサイラ\ ReactChildReconciler.js：143：10 _reconcilerUpdateChildren C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ r \ RejectMultiChild.js：212：10 _updateChildren C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactMultiChild.js：345：6 updateChildren C：\ユーザー\マンスール\ドキュメント\ AwesomeProject \ node_modules \反応ネイティブ\ライブラリ\レンダラ\ SRC \レンダラ\共有\スタック\リコンサイラ\ ReactMultiChild.js：331：25 receiveComponent C：\ユーザー\マンスールを\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Rails \ src \ renderers \ native \ ReactNativeBaseComponent.js：130：24 receiveComponent C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \レンダラー\ src \ renderers \ shared \ stack \ reconciler \ ReactReconciler。JS：163：38 _updateRenderedComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponent.js：982：8 _performComponentUpdate C ：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js：944：34 updateComponent C：\ Users \ Mansur \ Documents \ AwesomeProject C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Ribraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥reactCompositeComponent.js：847：8 receiveComponent C：レンダラー\ src \ renderers \ shared \ stack \ reconciler \ ReactCompositeComponent.js：710：6 receiveComponent C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \ Mansur \ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：ユーザー\ \マンスール\ドキュメント\ AwesomeProject \ node_modules \ react-ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\ shared \ stack \ reconciler \ ReactCompositeComponent.js：847：8 receiveComponent C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js：710：6 receiveComponent C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\のsrc \レンダラーが共有\スタック\の競合回避の\のReactCompositeComponent.jsを\：8 _performComponentUpdate C：982 \ユーザーは、マンスール\ドキュメント\ \ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラーが共有\ \ stack \ reconciler \ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \ Mysur \ Documents \ AwesomeProject \ node_modules \ react \ native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactCompositeComponent.js： 710：6 receiveComponent C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥Ribraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactCompositeComponent.js： 163：38 _updateRenderedComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponentレンダラーは\スタック\競合回避\ ReactReconciler.js共有、\します.js：982：8 _performComponentUpdate C：\ Users \ Mansur \ Documents \ AwesomeProject \ node _modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ847：8 performUpdateIfNecessary C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\ \のsrc \レンダラーは\スタック\競合回避\ ReactCompositeComponent.js共有、\しますリコンサイル\ ReactCompositeComponent.js：735：8 performUpdateIfNecessary C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactReconcilerJS：213：46 runBatchedUpdates C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactUpdates.js：171：6 は Cを実行します：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥utils¥Transaction.js：149：24 C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renders¥shared¥utils¥Transaction.js：149：24 レンダラー\共有\スタック\リコンサイル\ ReactUpdates.js：96：8 flushBatchedUpdates C：\ Users \ Mansur \ Documents \ AwesomeProject \ n os_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactUpdates.js：199：26 closeAll C：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer \ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ utils \ Transactionを実行します。 JS：163：24 batchedUpdates C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\レンダラ\ SRC \レンダラー\共有\スタック\競合回避\ ReactDefaultBatchingStrategy.js：65：33 batchedUpdates C ：¥Users¥Mansur¥Documents¥AwesomeProject¥node_modules¥react-native¥Libraries¥Renderer¥src¥renderers¥shared¥stack¥reconciler¥ReactUpdates.js：111：41 _receiveRootNodeIDEvent C：\ユーザー\マンスール\ドキュメント\ AwesomeProject \ node_modules \反応ネイティブ\ライブラリ\レンダラ\ SRC \ネイティブ\ ReactNativeEventEmitter.js \レンダラ：126： C 32 receiveTouches：\ユーザー\マンスール\ドキュメント\ AwesomeProject C：\ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ native \ ReactNativeEventEmitter.js：213：8 __callFunction JS：242：47 C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\ BatchedBridge \のMessageQueue.js：108：26 ガード C：ユーザー\ \マンスール\ドキュメント\ AwesomeProject \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：46：4 callFunctionReturnFlushedQueue C：\ Users \ユーザーマンスール\ドキュメント\ AwesomeProject \ node_modules \反応し、ネイティブ\ライブラリ\ BatchedBridge \のMessageQueue.js：107：

10は、どのように私はこの問題を解決することができますか？ コンストラクタで状態にコンポーネントレベルで

Answer 1

移動状態。