React Native中Picker无法通过Endpoint数据填充问题求助

问题概述 #

在React Native项目中使用@react-native-picker/picker组件对接后端接口获取国家数据，无论后端返回带results字段还是data字段的数组结构，下拉选择器始终无法渲染出国家选项。

后端返回数据格式 #

初始返回结构 #

{
    "error": false,
    "message": "OK",
    "results": [
        {
            "_id": "63a7c7a2e1d05cc8db72f011",
            "country_name": "Nigeria",
            "symbol": "NG",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        },
        {
            "_id": "63a7c7d7e1d05cc8db72f014",
            "country_name": "Ghana",
            "symbol": "GH",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        }
    ]
}

调整后返回结构 #

{
    "data": [
        {
            "_id": "63a7c7a2e1d05cc8db72f011",
            "country_name": "Nigeria",
            "symbol": "NG",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        },
        {
            "_id": "63a7c7d7e1d05cc8db72f014",
            "country_name": "Ghana",
            "symbol": "GH",
            "created_at": "2022-12-25T03:40:49.736Z",
            "__v": 0
        }
    ]
}

核心问题排查 #

1. map函数未返回组件
   Picker选项循环中，map回调没有返回<Picker.Item>元素，导致没有生成任何可渲染的选项。原代码用花括号{}包裹回调逻辑，未使用return或箭头函数隐式返回。

2. useEffect无限循环
   useEffect未设置依赖数组，组件每次渲染都会重复调用接口，引发不必要的状态更新，可能导致组件渲染异常。

3. 无效的状态赋值
   尝试给country_name和country_symbol赋值responseJson.results.country_name，但results是数组，不存在country_name属性，属于无效操作，且这两个状态并未在Picker中使用，可直接删除。

4. 函数组件误用类组件语法
   在函数组件中使用this.setState，这是类组件的语法，会导致运行时错误，应改为使用useState对应的setter函数。

修复后的代码示例 #

1. 修复接口调用与useEffect #

// 修复后的接口调用函数
const getallCountry = async () => {
  try {
    const response = await fetch('https://webserver-migospay.onrender.com/api/location/get-country', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json'
      },
    });
    const responseJson = await response.json();
    // 根据后端返回结构选择对应字段，这里用调整后的data字段
    setGetCountry(responseJson.data);
  } catch (error) {
    console.error('获取国家数据失败:', error);
  }
};

// 修复后的useEffect，添加空依赖数组确保只执行一次
useEffect(() => {
  getallCountry();
}, []);

2. 修复Picker渲染逻辑 #

<Picker
  style={{
    width: 300,
    height: 55,
    borderBottomWidth: 1,
  }}
  itemStyle={{
    fontSize: 25,
    fontFamily: 'Poppins-Medium',
  }}
  selectedValue={selectedCountry}
  onValueChange={(value) => setSelectedCountry(value)}
>
  <Picker.Item label="Select Country" value="" />
  {/* 修复map函数，使用隐式返回 */}
  {getCountry.map((country) => (
    <Picker.Item 
      label={country.country_name} 
      value={country.symbol} 
      key={country._id} {/* 用唯一ID作为key，避免index引发的渲染异常 */}
    />
  ))}
</Picker>

3. 修复TextInput的onChangeText语法 #

// 先声明对应状态
const [creditAccount, setCreditAccount] = useState('');
const [amount, setAmount] = useState('');
const [description, setDescription] = useState('');

// 修复后的TextInput示例
<TextInput
  placeholder="Destination Account"
  onChangeText={setCreditAccount}
  style={styles.input}
/>

<TextInput
  placeholder=" Amount"
  onChangeText={setAmount}
  style={styles.input}
/>

额外注意事项 #

• 优先使用数据的唯一标识（如_id）作为map循环的key，而非数组index，避免组件重渲染时出现异常。
• 添加接口调用的异常捕获，方便排查网络或后端错误。
• 确保selectedCountry初始值与Picker.Item的value类型一致，比如设置为空字符串''而非undefined。

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