React Native函数组件将API年份数据加载到Picker时报undefined错误

报错根因 #

报错提示Undefined is not a function(near '...year.map...') 由以下代码问题叠加触发：

• 状态逻辑冲突：用同一个year状态同时存储接口返回的年份数组、以及Picker当前选中的单个年份值。当用户操作Picker触发onValueChange时，setYear会把原本的数组直接覆盖为单值，后续组件重渲染时，非数组的year不存在map方法，直接抛出该错误。
• 模板字符串语法错误：定义Picker.Item的label和value时，用单引号包裹了插值写法'${item.year}'，实际渲染的是纯静态字符串${item.year}，无法正常取到item的年份值。
• 接口未主动触发：仅写了yearApi请求函数的定义，但没有在函数组件的挂载周期内执行请求，始终无法拿到接口返回的年份列表。
• 渲染无兜底判断：直接对year调用map方法，没有校验它是否为数组，碰到非数组类型时直接触发异常。

修正后代码 #

import { useState, useEffect } from 'react';
import { Picker, StyleSheet } from 'react-native';

const ShowAtt = (props) => {
  // 拆分两个独立状态，分别存列表数据、选中值，避免互相覆盖
  const [yearList, setYearList] = useState([]);
  const [selectedYear, setSelectedYear] = useState('');

  const yearApi = () => {
    fetch('你的接口地址')
      .then(res => res.json())
      .then(result => {
        setYearList(result.data);
        // 默认选中第一个年份，避免Picker初始值为空的异常
        setSelectedYear(result.data[0]?.year ?? '');
      })
      .catch(err => {
        console.log('接口请求失败', err);
      })
  }

  // 组件挂载时执行接口请求
  useEffect(() => {
    yearApi();
  }, [])

  return (
    <Picker
      style={{ borderBottomColor: "black" }}
      selectedValue={selectedYear}
      onValueChange={newVal => setSelectedYear(newVal)}
    >
      {/* 增加数组类型判断兜底，避免非数组场景下map报错 */}
      {Array.isArray(yearList) && yearList.map((item, key) => (
        <Picker.Item
          style={styles.input}
          label={item.year.toString()}
          value={item.year}
          key={key}
        />
      ))}
    </Picker>
  )
}

const styles = StyleSheet.create({
  input: {}
})

开发注意事项 #

• Picker的selectedValue类型必须和对应Picker.Item的value类型保持一致，否则会出现选中值不匹配的渲染异常
• 对接口返回的列表数据执行map操作前，一定要用Array.isArray()做类型校验，减少线上无意义报错
• JS模板字符串必须用反引号包裹才能实现变量插值，单引号、双引号包裹的插值语法会被识别为纯静态文本

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