React Native报错：undefined is not an object (evaluating 'data.map')求助

错误原因 #

• State初始值未正确设置：你给data和isLoading的初始状态都是undefined。组件第一次渲染时，isLoading为undefined，会直接走到渲染Picker的分支，此时data也是undefined，调用map方法自然触发报错。
• 异步请求时序问题：接口请求是异步操作，组件挂载后会先完成第一次渲染，此时请求还未返回结果，data依然是初始的undefined，触发map调用报错。
• 额外问题：
  • Picker的selectedValue绑定了数组data，不符合Picker的使用逻辑，它应该绑定单个选中项的值。
  • 模板字符串用了单引号'${item.bencana}'，无法解析变量，必须用反引号；同时map的回调函数里没有返回Picker.Item元素。

解决方法 #

1. 给State设置合理初始值：data初始设为空数组[]，保证初始渲染时map能正常调用；isLoading初始设为true，确保请求完成前显示加载状态。
2. 单独维护Picker的选中状态：新增selectedItem状态存储选中项的值，避免和数据源data混淆。
3. 修复模板字符串和map返回：用反引号包裹模板字符串，map回调返回Picker.Item（可用隐式返回去掉大括号）。
4. 可选安全防护：用可选链data?.map进一步避免意外报错，设置初始空数组后这一步非必须，但能提升代码健壮性。

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, Picker, ActivityIndicator, StyleSheet } from 'react-native';

const Sub_Map = () => {
  // 设置合理的初始状态
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  // 单独维护Picker的选中项
  const [selectedItem, setSelectedItem] = useState('');

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    fetch('http://..../aplikasi/restapi.php?op=getJenis')
      .then(res => res.json())
      .then(json => setData(json))
      .catch(error => alert(error))
      .finally(() => setLoading(false));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Pilih Data</Text>
      <View style={styles.picker}>
        {isLoading ? (
          <ActivityIndicator />
        ) : (
          <Picker
            selectedValue={selectedItem}
            onValueChange={(itemValue) => setSelectedItem(itemValue)}>
            {/* 用隐式返回，模板字符串用反引号 */}
            {data.map((item, key) => (
              <Picker.Item
                label={`${item.bencana}`}
                value={`${item.id}`}
                key={key}
              />
            ))}
          </Picker>
        )}
      </View>
    </View>
  );
};

// 补充样式（可根据实际需求调整）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 15,
  },
  picker: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
  },
});

export default Sub_Map;

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