Undefined不是评估this.state的对象。* [英] Undefined is not an object evaluating this.state.*

问题描述

我遇到了将数据发布到我在react-native应用中使用 fetch 的快速REST API的问题。这是我的代码：

I'm having an issue with posting data to an express REST API I have using fetch in my react-native app. Here's my 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);

当我尝试按下我的按钮来调用 addData function，我收到此错误： undefined不是对象（评估this.state.name）。

When I try to press my button to call the addData function, I get this error: undefined is not an object (evaluating this.state.name).

在加载应用程序时，我的状态变量似乎正好加载到< Text /> 区域：

On load of the app, my state variables seem to be loading just fine into the <Text/> areas:

但是当我提交这个是显示：

But when I submit this is what shows:

当我将 fetch 的主体更改为

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

它的工作原理精细。所以我认为这个的值可能与 fetch 函数中的值不一样，所以在顶部 addData（）我做了类似的事情，让那个= <; code>并将我所有的状态变量设置为 that.state.name等但仍然无效。

It works fine. So I thought that the value of this might not be the same from within the fetch function, so at the top of addData() I did something like let that = this; and set all my state variables to that.state.name, etc but that still didn't work.

推荐答案

可能你需要绑定上下文。在 onClick 方法中添加如下内容： onClick = {this.addData.bind（this）} 。这样，该方法可以访问状态对象。

Probably you need to bind the context. In your onClick method add something like this: onClick={this.addData.bind(this)}. This way the method can have access to the state object.

这篇关于Undefined不是评估this.state的对象。*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！