在React+ASP.NET Core项目中实现下拉框显示产品名称而非ProductId

一、后端（.NET Core 控制器）调整 #

要让前端能拿到产品名称，首先得在后端查询销售数据时，关联加载对应的产品信息：

1. 引入EF Core关联查询命名空间
   在控制器文件顶部添加：

using Microsoft.EntityFrameworkCore;

2. 修改GetSales方法，加载Product导航属性
   原来的代码只查了Sales表，没带关联的Product数据，用Include方法把Product表的数据一起查出来：

[HttpGet]
[Route("GetSales")]
public IActionResult GetSales()
{
    using NavbaseContext db = new NavbaseContext();
    List<Sale> saleList = db.Sales.Include(s => s.Product).ToList();
    return Ok(saleList);
}

确认你的Product模型类里有产品名字段（比如ProductName或Name），这是前端要显示的内容。

二、前端（React组件）修改 #

后端返回的数据里现在每个Sale对象都带了Product属性，直接用这个属性里的名称替换原来的ProductId就行：

修改下拉菜单的渲染代码：

{                            
    sales.map((item) => (
        <option key={item.id} value={item.productId}>
            {item.Product?.ProductName ?? "未知产品"}
        </option>
    ))
}

说明：

• 加key={item.id}是React列表渲染的必填项，避免控制台警告
• ?.是可选链操作符，防止Product为空时触发报错
• ?? "未知产品"是为空时的默认显示文本，避免空白

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