Pas défini n'est pas l'objet de l'évaluation.de l'état.*

Je vais avoir un problème avec les données de validation expresse de l'API REST j'ai l'aide de fetch dans mon réagir-application native. Voici mon code:

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Button from 'react-native-button';
import DeviceInfo from 'react-native-device-info'
export default class ReliefMobile extends Component {
state: any;
constructor(props) {
super(props);
this.state = {
currentLocation: {latitude: 40.6391, longitude: 10.9969},
name: 'Some dumb name',
description: 'Some dumb description',
deviceId: DeviceInfo.getUniqueID()
}
}
addData() {
fetch('http://localhost:3000/api/effort/add', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: this.state.name,
description: this.state.description,
deviceId: this.state.deviceId,
currentLocation: this.state.currentLocation
})
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native
</Text>
<Text style={styles.instructions}>
Your device ID is {DeviceInfo.getUniqueID()}
</Text>
<Text style={styles.instructions}>
Effort Name: {this.state.name}
</Text>
<Text style={styles.instructions}>
Effort Description: {this.state.description}
</Text>
<Text style={styles.instructions}>
Location: {this.state.currentLocation.latitude}, {this.state.currentLocation.longitude}
</Text>
<Button onPress={this.addData}>Add data</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('ReliefMobile', () => ReliefMobile);

Quand j'ai essayer d'appuyer sur mon bouton pour appeler la addData fonction, j'obtiens cette erreur: undefined is not an object (evaluating this.state.name).

En charge de l'application, mes variables d'état semble être le chargement de l'amende dans le <Text/> domaines:

Pas défini n'est pas l'objet de l'évaluation.de l'état.*

Mais quand je soumettre c'est ce que montre:
Pas défini n'est pas l'objet de l'évaluation.de l'état.*

Quand j'ai modifier le corps de la fetch être quelque chose comme 

body: JSON.stringify({name: 'some name', description: 'some description'})

Il fonctionne très bien. Alors j'ai pensé que la valeur de this peut-être pas la même chose de l'intérieur de la fetch fonction, donc en haut de addData() j'ai fait quelque chose comme let that = this; et mettre toutes mes variables d'état à that.state.name, etc mais cela ne fonctionne toujours pas.

Bibliographie blog.andrewray.me/réagir-es6-autobinding-et-createclass

OriginalL'auteur Joshua Terrill | 2016-11-06

  1. 21

    Vous avez probablement besoin de se lier au contexte. Dans votre onClick méthode ajouter quelque chose comme ceci: onClick={this.addData.bind(this)}. De cette façon, la méthode peut avoir accès à la état objet.

    OriginalL'auteur Hosar

  2. 6

    Réagir les gestionnaires ne sont pas automatiquement lié à l'élément ou de la classe qu'ils fréquentent. 

    <Button onPress={this.addData.bind(this)}>Add data</Button>

    https://facebook.github.io/react/docs/handling-events.html

    Extrait du lien ci-dessus

    //This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
    Il a obtenu, grâce.

    OriginalL'auteur Juan Mendes

  3. 3

    Vous devez lier votre constructeur de pas dans la fonction rendu. Dans votre constructeur, il suffit d'ajouter:

    this.addData = this.addDate.bind(this);

    Vous pouvez également utiliser ES6 comme une autre alternative:

    addData = () => { ... }

    Qui va travailler à l', comme indiqué ici: https://babeljs.io/blog/2015/06/07/react-on-es6-plus en vertu de la flèche en fonction de la section.

    OriginalL'auteur Steven Scaffidi

  4. -2

    En cas de réagir, de faire addData() comme la flèche de la fonction comme ceci:

    addData = () => {
... 
}

    OriginalL'auteur Ghulam Rasool