react-native-maps - TypeError：未定义不是对象（评估'_this.state.region'）答案

【问题标题】：react-native-maps - TypeError: undefined is not an object (evaluating '_this.state.region')react-native-maps - TypeError：未定义不是对象（评估'_this.state.region'）
【发布时间】：2018-12-24 13:26:41
【问题描述】：

我在尝试嵌入 react-native-maps 函数时收到此错误消息。

react-native-maps - TypeError: undefined is not an object (evaluating '_this.state.region')

我的代码

Home.js

import MapView from 'react-native-maps';

export default () => (
    <MapView 
    style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    }} 
    region={this.state.region} 
    onRegionChange={this.onRegionChange}
  />
);

index.js

export default class App extends React.Component {

/**/

  getInitialState() {
    return {
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
    };
  }

  onRegionChange(region) {
    this.setState({ region });
  }

  render() {
    /**/
  }
}

参考：https://github.com/datomnurdin/auth-reactnative

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

首先getInitialState 已被弃用。检查this

和工作示例。 https://snack.expo.io/@nazrdogan/mapview-example?session_id=snack-session-cSA-6uzo9

第二个问题是onRegionChange 函数。你需要绑定或使用箭头函数

【讨论】：

【解决方案2】：

您在使用它的上下文中没有状态。即 Home.js 中的函数

您应该做的是将组件中的region 作为 Map 无状态组件中的道具传递。

此外，onRegionChange 在这里也不可用，因此也将其作为道具传递

您的代码应如下所示：

import MapView from 'react-native-maps';

 export default ({region, onRegionChange}) => (
   <MapView 
     style={{
       position: 'absolute',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
     }} 
     region={region} 
     onRegionChange={onRegionChange}
    />
    );

当你在渲染中使用它时，像下面这样从你有region状态变量的组件中使用它。

import MyMap from './Home' . //Assuming that the Map function is imported as MyMap name.
....
render() {
  ...
   <MyMap region ={this.state.region} onRegionChange ={this.onRegionChange} />
}

此外，您不应将 getInitialState 用作已弃用的 class 语法。

你应该像这样初始化你的状态：

export default class App extends React.Component {
   constructor (props) {
      super (props);
      this.state = {
       ...
       region: {
           latitude: 37.78825,
           longitude: -122.4324,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
      },
     }
   }
}

另外，你还没有在你的类中绑定你的 onRegionChanged 函数，使用 ES6 => 操作符。

onRegionChange = (region) => {
   this.setState({ region });
}

【讨论】：

我已经尝试过了，目前没有错误信息，但似乎没有检测到地图区域的纬度和经度。
@MohammadNurdin 在地图函数中渲染之前，您能否验证您是否拥有带有数据的区域对象？
如何验证？我试试这个，但什么也没发生。 onRegionChange = (region) => { alert(region); this.setState({ 区域 }); }

【解决方案3】：

我已经得到了答案。创建一个新文件来声明一个新的全局变量和函数。

Home.js

import MapView from 'react-native-maps';
import { onRegionChange, _values } from "./NewFile";

export default () => (
    <MapView 
    style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    }} 
    region={_values.region}
    onRegionChange={() => onRegionChange() }
  />
  />
);

NewFile.js

export const _values = { 
  region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }
};

export const onRegionChange = (region) => {
     _values.region = region;
}

【讨论】：