未定義のオブジェクトはthis.stateを評価するオブジェクトではありません。*

Question

レスキューネイティブアプリでfetchを使用しています。ここに私のコードがあります：私はaddData関数を呼び出すために私のボタンを押ししようとすると

/** 
* 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); 

、私はこのエラーを取得：undefined is not an object (evaluating this.state.name)。アプリの負荷に

、私の状態変数が<Text/>領域にうまくロードされているように見える：

しかし、私はこれを提出する際に示したものです：

I fetchの本文を次のように変更してください。

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

それは正常に動作します。だから私はthisの値がfetch関数内から同じでないかもしれないと思っていたので、addData()の先頭に私はlet that = this;のような何かを行い、すべての状態変数をthat.state.name, etcに設定しましたが、それでも動作しませんでした。

Answer 1

上からの抜粋おそらくあなたは、コンテキストをバインドする必要があります。 onClickメソッドに次のように追加します。onClick={this.addData.bind(this)}この方法では、状態オブジェクトにアクセスできます。

Answer 2

は、ハンドラが自動的に彼らがしている要素/クラスにバインドされていない反応します。

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

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

リンク

// This syntax ensures `this` is bound within handleClick 
return (
    <button onClick={(e) => this.handleClick(e)}> 
    Click me 
    </button> 
); 

Answer 3

レンダリング機能ではなくコンストラクタでバインドする必要があります。あなたのコンストラクタでは、ちょうど追加：あなたはまた、別の代替としてES6を使用することができます

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

：ここに記載されているように動作します

addData =() => { ... }

：https://babeljs.io/blog/2015/06/07/react-on-es6-plusを矢印機能部の下に。