React Native报错TypeError: stateInfo.map is not a function问题求助

问题原因 #

报错核心是stateInfo的初始值类型错误：

• 你给stateInfo设置的初始值是空对象{}，而map是仅数组可用的方法，普通对象不存在该方法
• 组件首次渲染时，useEffect内的接口请求还未返回结果，模板直接执行stateInfo.map就会抛出类型错误，导致应用崩溃。

修复方案 #

1. 修改初始值 #

将stateInfo的初始值从空对象改为空数组即可解决首屏渲染报错问题：

// 错误写法
const [stateInfo, setStateInfo] = useState({});
// 修正写法
const [stateInfo, setStateInfo] = useState([]);

2. 可选优化（更稳妥） #

为了避免接口异常返回非数组数据时再次触发同类错误，可以在渲染Picker选项时增加类型判断：

<Picker
  selectedValue={selectedstate}
  onValueChange={(itemValue, itemIndex) => (
    setSelectedState(itemValue), setSelectedStateCode(itemIndex)
  )}
>
  {/* 增加数组类型判断 */}
  {Array.isArray(stateInfo) && stateInfo.map((state) => (
    <Picker.Item
      label={state.name}
      value={state.value}
    ></Picker.Item>
  ))}
</Picker>

额外建议 #

你注释掉的获取地区列表的useEffect也存在逻辑问题：你当前的stateInfo是包含所有省份的数组，不存在stateInfo.state_id属性，后续开发这部分功能时，应该监听选中的selectedStateCode变化，用选中的省份id去请求对应地区列表，同时也要注意districtInfo的初始值也要设置为空数组。
另外可以给fetch请求增加catch错误捕获，避免接口请求失败导致页面异常：

useEffect(() => {
  fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
    .then((response) => response.json())
    .then((data) => {
      const getstate = data.states.map((state) => ({
        name: state.state_name,
        value: state.state_id,
      }));
      setStateInfo(getstate);
    })
    .catch(err => {
      console.error('获取省份列表失败:', err)
      setStateInfo([])
    })
}, []);

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