React中如何通过Key获取对象名称？预算应用下拉框问题

你可以通过数组的find()方法，根据选中的Key（selected）从budgets数组中匹配对应的预算对象，再提取其名称作为按钮显示值，具体实现如下：

修改后的代码逻辑 #

1. 先根据选中的Key找到对应的预算对象：

// 假设selected是当前选中的预算ID（字符串或数字类型）
const selectedBudget = budgets.find(budget => budget.id === selected);
// 处理未选中或找不到对应对象的情况，设置默认显示文本
const selectedValue = selectedBudget ? selectedBudget.name : '选择预算';

2. 把计算好的selectedValue直接用在按钮上即可，原下拉菜单部分无需改动：

<Dropdown>
   <Dropdown.Button color="secondary">{selectedValue}</Dropdown.Button>
   <Dropdown.Menu ref={budgetIDRef} selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} aria-label="选择预算">
      
   {budgets.map(budget => (
      <Dropdown.Item key={budget.id}>{budget.name}</Dropdown.Item>
   ))}

   </Dropdown.Menu>
</Dropdown>

为什么之前的map+if方案无效 #

你之前用map()加if语句的方式，会遍历整个budgets数组，所有符合条件的元素都会被返回并渲染，所以会出现连续显示所有匹配名称的问题。而find()方法只会返回数组中第一个符合条件的元素，刚好匹配单选下拉菜单的场景，只会返回当前选中的那一个预算对象。

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