未定義不是評估this.state。*的對象。

Question

我在我的本機應用程序中使用fetch數據發布到快速REST API時遇到問題。 這是我的代碼：

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

當我嘗試按下按鈕調用addData函數時，出現此錯誤： undefined is not an object (evaluating this.state.name) 。

在加載應用程序時，我的狀態變量似乎可以很好地加載到<Text/>區域：

但是當我提交時，這表明：

當我將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

React處理程序不會自動綁定到它們所在的元素/類。

<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

您應該在構造函數中綁定而不是在render函數中綁定。 在您的構造函數中，只需添加：

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

您還可以使用ES6作為另一種選擇：

addData = () => { ... }

它將按此處記錄的方式工作： https : //babeljs.io/blog/2015/06/07/react-on-es6-plus在箭頭功能部分下。

Answer 4

如果有反應，請將addData（）用作箭頭函數，如下所示：

addData = () => {

    ... 

}