Question

在React Native中，我有以下内容：

import React, { Component }                                         from 'react';
import PropTypes                                                    from 'prop-types';
import { StyleSheet, Text, View, TouchableHighlight }               from 'react-native';
import Immutable                                                    from 'immutable';

const styles = StyleSheet.create({
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: '20%',
  },
});

export default class VirtualFenceBottom extends Component {

  constructor(props) {
    super(props);
    this.state = { markers: this.props.markers  };
  }

  populateMarkers = () => {
    let markersVar = this.state.markers;
    fetch('http://localhost:8080/virtualFence', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }}).then(function(response){
          console.log('GET markers success');

          // Parse it as JSON
          parsedResponse = JSON.parse(response["_bodyInit"]);

          console.log('response after JSON.parse: ',parsedResponse);

          if (parsedResponse.length > 0) {
            //update state here
            console.log('parsedResponse in if statement: ',parsedResponse);
            // this.setState({markers: parsedResponse});
          } else {
            console.log('There were no markers in db');
          }



          console.log('markersVar: ',markersVar);
          // console.log('this.state.markers after setState: ',this.state.markers);

        }).catch(function(error) {
          console.log('GET markers error');
          console.log("GET markers error: ",error);
        });
  };

  render() {

    return (
      <View>
        <TouchableHighlight onPress={this.populateMarkers}>
          <Text style={styles.text}>Populate markers from DB</Text>
        </TouchableHighlight>
      </View>
    );
  }}

一切正常，除了我无法直接在fetch内部访问状态。奇怪的是，我可以使用markerVar在包含函数中访问它。 fetch本身似乎有一个特定的问题。

我的目标是使用响应来更新状态。在我看来，类似问题的现有答案似乎都不起作用。我该怎么办？

更新1：添加了整个组件的代码。

更新2：修复了parsedResponse变量的拼写错误，该错误导致了一部分错误。

Answer 1

请确保该函数在组件内部中存在，否则它将无法访问按词法界定的this.state方法。

class MyComp extends React.Component {

  state = { val: 0 }

  myMethod = () => {
    this.setState({ val: 2 })
  }
}

还要考虑每当您从状态中抽取值时，请保持名称一致。例如：

const { markers } = this.state

Answer 2

响应fetch结果而调用的回调只是非绑定函数。试试这个：

}}).then(function(response){
    console.log('this', this); // see that 'this' is not
                               // what you expect it to be

请注意，JavaScript中的function() { ...}创建了一个闭包，该闭包捕获了所有局部变量（包括您的marketsVar，但不是 _this __。

因此，“ this”指向通常没有状态的“ window”变量。

要解决此问题，您可以

1）使用粗箭头功能then，并在catch处理程序中使用：（我们现在在2018年，您的工具链肯定会处理它）：

fetch(...)
    .then(() => {
         this.setState(...) // this is defined. magic!

2）为this创建别名-有时使用that：

var that = this;
fetch(...)
    .then(function() {
         that.setState(...); // that is defined in same way as marketsVar
    })

3）bind手动处理您的处理程序，但这很丑陋，所以我不建议这样做。

无法在React Native中访问内部获取状态

2 个答案: