null ist kein Objekt (Auswerten ‚this.state.token‘) Reagieren Native

Question

Ich versuche, eine Klasse in einer Ansicht zu laufen, aber ich erhalte die folgenden Fehler:

null ist kein Objekt (Auswertung 'this.state.token')

Dies ist die Klasse, die zu machen, im Versuch:

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> 
)}; 
} 
} 

ich habe den folgenden Code in meiner Komponente:

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)}); 
    } 

} 

Ich nenne die Back-End-Klasse wie dies in meiner Render-Funktion:

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

Stacktrace:

null ist kein Objekt ('this.state.token' Evaluieren) machen C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ src \ Smartplanner.js: 64: 21 C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js : 1045: 14 measureLifeCyclePerf C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 85: 11 _renderValidatedComponentWithoutOwnerOrContext C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 1045: 8 _renderValidatedComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 1075: 10 performInitialMount C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactCompositeComponent.js: 484: 24 mountComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 346: 40 mountComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactReconciler.js: 62: 6 updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactChildReconciler.js: 157: 10 _reconcilerUpdateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactMultiChild.js: 212: 10 _updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactMultiChild.js: 345: 6 updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ rect-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactMultiChild.js: 331: 25 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ read-native \ Bibliotheken \ Renderer \ src \ renderers \ native \ ReactNativeBaseComponent.js: 130: 24 receiveComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactReconciler.js: 163: 38 _updateRenderedComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 982: 8 _performComponentUpdate C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Libraries \ Renderer \ src \ \ Renderer shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 944: 34 updateComponent C : \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactCompositeComponent.js: 847: 8 receiveComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 710: 6 receiveComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ Renderer \ Shared \ Stack \ Versöhner \ ReactReconciler.js: 163: 38 upd ateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactChildReconciler.js: 143: 10 _reconcilerUpdateChildren C: \ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactMultiChild.js: 212: 10 _updateChildren C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactMultiChild.js: 345: 6 updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stapel \ Reconciler \ ReactMultiChild.js: 331: 25 receiveComponent C: \ Benutzer \ Mansur \ D ocuments \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ native \ ReactNativeBaseComponent.js: 130: 24 receiveComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactReconciler.js: 163: 38 _updateRenderedComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ Reconciler \ ReactCompositeComponent.js: 982: 8 _performComponentUpdate C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ read-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 944: 34 updateComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ L ibraries \ Renderer \ src \ renderers \ shared \ stack \ sycrender \ ReactCompositeComponent.js: 847: 8 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 710: 6 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactReconciler.js: 163: 38 updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactChildReconciler.js: 143: 10 _reconcilerUpdateChildren C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ r econciler \ ReactMultiChild.js: 212: 10 _updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactMultiChild.js: 345: 6 updateChildren C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactMultiChild.js: 331: 25 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ native \ ReactNativeBaseComponent.js: 130: 24 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactReconciler.js: 163: 38 _updateRenderedComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactCompositeComponent.js: 982: 8 _performComponentUpdate C : \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactCompositeComponent.js: 944: 34 UpdateComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_module \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactCompositeComponent.js: 847: 8 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleicher \ ReactCompositeComponent.js: 710: 6 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleicher \ ReactReconciler.js: 163: 38 _updateRenderedComponent C: \ Users \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 982: 8 _performComponentUpdate C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react- native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 944: 34 updateComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 847: 8 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactCompositeComponent.js: 710: 6 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactReconciler.js: 163: 38 _updateRenderedComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 982: 8 _performComponentUpdate C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactCompositeComponent.js: 944: 34 updateComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ read-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 847: 8 receiveComponent C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ reagieren -native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Abgleich \ ReactCompositeComponent.js: 710: 6 receiveComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactReconciler.js: 163: 38 _updateRenderedComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ read-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent .js: 982: 8 _performComponentUpdate C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node _module \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ Stapel \ Reconciler \ ReactCompositeComponent.js: 944: 34 updateComponent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ sconsole \ ReactCompositeComponent.js: 847: 8 performUpdateIfNecessary C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactCompositeComponent.js: 735: 8 performUpdateIfNecessary C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactReconciler.js: 213: 46 runBatchedUpdates C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Libraries \ Renderer \ src \ \ Renderer shared \ Stapel \ Reconciler \ ReactUpdates.js: 171: 6 zuführen C : \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ Knotenmodule \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ utils \ Transaction.js: 149: 24 führen Sie aus C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ utils \ Transaction.js: 149: 24 ausführen C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactUpdates.js: 96: 8 flushBatchedUpdates C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ n ode_module \ read-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ sconciler \ ReactUpdates.js: 199: 26 closeAll C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Libraries \ Renderer \ src \ renderers \ shared \ utils \ Transaction.js: 222: 29 Führen Sie C: \ Benutzer \ Mansur \ Documents \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ utils \ Transaction. js: 163: 24 batchedUpdates C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ shared \ Stack \ Versöhner \ ReactDefaultBatchingStrategy.js: 65: 33 batchedUpdates C : \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ shared \ stack \ reconciler \ ReactUpdates.js: 111: 41 _receiveRootNodeIDEvent C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ Renderer \ src \ Renderer \ nativen \ ReactNativeEventEmitter.js: 126: 32 receiveTouches C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_module \ react-native \ Bibliotheken \ Renderer \ src \ renderers \ native \ ReactNativeEventEmitter.js: 213: 8 __callFunction C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue. js: 242: 47 C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Libraries \ BatchedBridge \ MessageQueue.js: 108: 26 guard C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ react-native \ Bibliotheken \ BatchedBridge \ MessageQueue.js: 46: 4 callFunctionReturnFlushedQueue C: \ Benutzer \ Mansur \ Dokumente \ AwesomeProject \ node_modules \ reagieren-native \ Bibliotheken \ BatchedBridge \ MessageQueue.js: 107: 10

Wie kann ich dieses Problem lösen?

Answer 1

Verschieben Zustand in der Komponentenebene zum Zustand im Konstruktor.