React GET请求及React Native地图标记实现问题排查

一、GET请求存入状态数组的错误修正 #

你这段代码混用了类组件的状态写法，但组件本身是函数组件，核心问题如下：

• 函数组件不能用state = { features: [] }声明状态，必须使用useState钩子
• 函数组件不存在this上下文，不能调用this.setState，要使用useState返回的状态更新函数

修正后的代码：

import { useState, useEffect } from 'react';

export default function App() {
  // 用useState声明状态，初始值为空数组
  const [features, setFeatures] = useState([]);

  useEffect(() => {
    fetch(featuresURL, oParam)
      .then((response) => response.json())
      .then((data) => {
        // 用setFeatures更新状态，无需this
        setFeatures(data);
      })
      .catch(() => alert("请求失败"));
  }, []);

  // 此处可补充组件返回逻辑
}

二、React Native MapView渲染GeoJSON标记的错误修正 #

这段代码存在多处函数组件的使用错误，逐一修正：

1. 函数组件无this上下文，不能用this.data、this.mapMarkers()，直接使用状态变量和函数名即可
2. mapMarkers需定义为组件内部的普通函数，不能用类组件的箭头函数写法
3. 初始状态应设为{ features: [] }，避免访问data.features时因空值报错
4. 遍历前需判断data.features是否存在且有内容，防止渲染崩溃

修正后的代码：

import { useState, useEffect } from 'react';
import MapView, { Geojson } from 'react-native-maps';
import { StyleSheet, Alert } from 'react-native';

export default function App() {
  // 初始状态匹配接口返回的GeoJSON结构
  const [data, setData] = useState({ features: [] });

  useEffect(() => {
    fetch(featuresURL, oParam)
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch(() => Alert.alert("请求失败"));
  }, []);

  // 定义普通函数，直接访问状态变量
  const mapMarkers = () => {
    // 先校验features的有效性，再遍历
    if (!data.features || data.features.length === 0) return null;
    return data.features.map((feature, index) => (
      // 列表渲染必须加key属性，避免React警告
      <Geojson
        key={index}
        geojson={feature}
        strokeColor="red"
        fillColor="green"
        strokeWidth={2}
      />
    ));
  };

  return (
    <MapView
      style={{ flex: 1 }}
      mapType="mutedStandard"
      initialRegion={{
        latitude: 37.1,
        longitude: -95.7,
        latitudeDelta: 10,
        longitudeDelta: 45,
      }}
    >
      {/* 直接调用函数，无需this */}
      {mapMarkers()}
    </MapView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});

额外注意：

• 确保已正确安装并导入react-native-maps库
• 若接口返回的GeoJSON结构不是{ features: [...] }，需根据实际返回值调整状态更新和遍历逻辑

内容的提问来源于stack exchange，提问作者Francisco Torres