使用React Native+Expo调用C# REST API时返回值为undefined如何解决

1. 跨域与访问地址问题 #

你当前使用Expo Web调试，调用本地localhost:5001的C# API首先会遇到**跨域资源共享(CORS)**限制，Web端会直接拦截请求，导致返回为空：

• 你需要在ASP.NET Core后端添加CORS配置，允许Expo Web的调试地址（通常为http://localhost:19006）访问接口，配置示例如下：

// Program.cs
var builder = WebApplication.CreateBuilder(args);
// 注册CORS服务
builder.Services.AddCors(opt => {
    opt.AddPolicy("AllowExpoDebug", policy => {
        policy.WithOrigins("http://localhost:19006")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});
builder.Services.AddControllers();
var app = builder.Build();
// 注意顺序：必须放在UseRouting之后、UseAuthorization之前
app.UseRouting();
app.UseCors("AllowExpoDebug");
app.UseAuthorization();
app.MapControllers();
app.Run();

• 后续如果需要在安卓真机/模拟器运行，不能使用localhost，要改为你开发机的局域网IP（格式如192.168.x.x），同时保证手机和开发机在同一个WiFi下。

2. API返回结构匹配问题 #

你当前渲染逻辑默认接口返回单个药品对象，但/api/Medicines这类接口通常默认返回药品数组，直接将数组赋值给data的话，肯定取不到id、name等字段，会返回undefined：

• 你可以先在浏览器地址栏直接输入接口地址，查看返回的结构：如果是数组，需要取对应下标的元素再赋值给data；如果是外层包裹了其他字段的对象，要按层级取到对应的药品数据。
• 另外要注意字段大小写匹配，比如后端返回Id而非id的话，也会取值失败。

3. 前端请求逻辑优化 #

你可以修改前端请求代码，增加状态判断和日志输出，方便快速定位问题：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
console.reportErrorsAsExceptions = false;
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  state={
    data:{}
  }
  
  getJsonData = () =>{
    // 此处替换为你开发机的实际IP
    fetch('http://192.168.3.12:5001/api/Medicines/',{
      method:'GET',
      headers:{
        'Accept': 'application/json'
      }
    })
    .then((response)=>{
      // 先判断请求是否成功
      if(!response.ok) throw new Error(`请求失败，状态码：${response.status}`)
      return response.json()
    })
    .then((responseJson)=>{
      // 打印返回内容，可直接在浏览器控制台查看返回结构
      console.log('接口返回内容：', responseJson);
      // 适配数组返回，取第一个元素
      const targetData = Array.isArray(responseJson) ? responseJson[0] : responseJson;
      this.setState({
        data: targetData
      })
    })
    .catch((error)=>{
      console.error('请求错误详情：', error)
    });
  }

  componentDidMount=()=>{
    this.getJsonData();
  }
  
  render(){
      const { data } = this.state;
      return (
        <View style={styles.container}>
          {/* 加可选链避免未加载完成时报错 */}
          <Text style={{margin:10, fontSize:16}}>{'ID: '+ data?.id}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Name: '+ data?.name}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Price: '+ data?.price}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Mark: '+ data?.mark}</Text>
          <Text style={{margin:10, fontSize:16}}>{'Description: '+ data?.description}</Text>
          <StatusBar style="auto" />
        </View>
      );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: 'center',
    justifyContent: 'center',
  },
});

4. 快速排查步骤 #

• 打开浏览器调试控制台，查看网络标签页的接口请求状态：如果是红色的CORS错误，检查后端CORS配置；如果是404/500错误，检查接口地址和后端服务是否正常。
• 查看控制台打印的接口返回内容，确认返回结构和字段和你渲染的逻辑是否匹配。

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