undefined 不是一个对象（评估'this.state.markers.map'）渲染

Question

我在运行 react-native 组件时遇到这种类型的错误，请帮帮我

undefined 不是一个对象（评估 'this.state.markers.map'） 渲染 undefined 不是一个对象（评估 'this.state.markers.map'） 渲染 c:\\projects\\myapp\\src\\components\\home\\hub .js:87:28 c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:1045:14 measureLifeCyclePerf c:\\projects\\myapp\\node_modules\\ react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:85:11 _renderValidatedComponentWithoutOwnerOrContext c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack \\reconciler\\ReactCompositeComponent.js:1045:8 _renderValidatedComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:1075:10 performInitialMount c:\\projects \\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:484:24 mountComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:346:40 mountComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\ Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactReconciler.js:62:6 performInitialMount c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js :496:6 mountComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:346:40 mountComponent c:\\projects\\myapp\\node_modules\\react -native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactReconciler.js:62:6 mountChildren c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\ reconciler\\ReactMultiChild.js:264:10 initializeChildren c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\native\\ReactNativeBaseComponent.js:74:41 mou ntComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\native\\ReactNativeBaseComponent.js:212:6 mountComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src \\renderers\\shared\\stack\\reconciler\\ReactReconciler.js:62:6 performInitialMount c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:496： 6 mountComponent c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactCompositeComponent.js:346:40 mountComponent c:\\projects\\myapp\\node_modules\\react-native\\ Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactReconciler.js:62:6 mountChildren c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\shared\\stack\\reconciler\\ReactMultiChild .js:264:10 initializeChildren c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\native\\ReactNativeBaseComponent.js:74:41 mountCom 组件 c:\\projects\\myapp\\node_modules\\react-native\\Libraries\\Renderer\\src\\renderers\\native\\

这是我的代码：

 import React, { Component } from 'react';
import {
AppRegistry,
 StyleSheet,
Text,
View
} from 'react-native';
import MapView from 'react-native-maps';

export default class Hub extends Component {
 constructor(props){
   super(props);
   this.state = {
   region: null,
   markers: null,
  mapStyle:null
 };
}

componentWillMount() {
 navigator.geolocation.getCurrentPosition(
   (position) => {
     console.log(position);
      this.setState({
       region: {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      },
      markers: {
        latlng: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        },
        title: 'marker test',
        description: 'ta ta ra',
      },
    });
  }, (error) => {
    console.log(error);
    this.setState({
      region: {
        latitude: 21.035080,
        longitude: 105.793627,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      },
      markers: {
        latlng: {
          latitude: 21.035080,
          longitude: 105.793627,
        },
        title: 'marker test',
        description: 'ta ta ra',
      },
    });
  },
);
}


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

render() {

const { region } = this.props;
const { markers } = this.props;
console.log(region);
return (
  <View style ={styles.container}>
    <MapView
      style={styles.map}
      region={this.state.region}
      onRegionChange={this.onRegionChange}

    >
    {this.state.markers.map(marker => (
      <MapView.Marker
        coordinate={marker.latlng}
        title={marker.title}
        description={marker.description}
      />
    ))}
    </MapView>
  </View>
);
}
}

Answer 1

• 使用markers = [];初始化状态markers = []; 不与null 。 然后

• 将它们设置为数组（在componentDidMount或useEffect如果您使用钩子）：

  标记：

   [{ latlng: { latitude: 21.035080, longitude: 105.793627, }, title: 'marker test', description: 'ta ta ra', }],

  不是作为单个对象，因此您可以使用map功能显示它们。

修改/调试后，如果您的代码仍然不起作用，请使用多个标记查看这个功能齐全的示例：

https://github.com/airbnb/react-native-maps/blob/master/example/examples/DefaultMarkers.js

Answer 2

您的标记是一个对象并将其更改为一个数组，以便在初始状态下将其设为数组，而不是 null（地图用于数组）。

如果你想在初始状态设置 null 像这样更改代码，

    {this.state.markers && this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.latlng}
            title={marker.title}
            description={marker.description}
          />
        ))}