React.js/React Native数组搜索选中索引异常问题求助

问题根源在于选中逻辑错误使用了原数组的索引，而非过滤后新数组的索引。比如搜索“Abilene”后，你展示的是过滤后的子集数组，但选中时却去原数组取对应索引的元素，自然会拿到错误的院校。

以下是几种针对不同代码场景的具体修复方式：

1. 直接绑定过滤后的元素（最简便） #

不要通过索引间接取值，点击时直接把当前展示的过滤后元素传进选中逻辑：

// 错误写法（用原数组索引）
function onSelect(index) {
  const selected = originalUnis[index]; // 这里取的是原数组对应索引的项，和过滤结果不匹配
}

// 正确写法（直接传元素）
function onSelect(school) {
  const selected = school; // 直接使用当前点击的过滤后院校
}

在渲染过滤结果的模板中（以React为例）：

filteredUnis.map((school) => (
  <div key={school.id || school.name} onClick={() => onSelect(school)}>
    {school.name}
  </div>
))

2. 若必须用索引，基于过滤后数组操作 #

如果业务逻辑依赖索引，确保选中时从过滤后的数组里取值：

function onSelect(filteredIndex) {
  const selected = filteredUnis[filteredIndex]; // 从过滤后数组取对应项
}

模板里传递过滤后的索引：

filteredUnis.map((school, filteredIndex) => (
  <div key={school.id || filteredIndex} onClick={() => onSelect(filteredIndex)}>
    {school.name}
  </div>
))

3. 用唯一ID匹配（最可靠） #

给每个院校添加唯一标识（比如id字段），通过ID来查找选中项，彻底规避索引混淆问题：

// 原数组示例
const originalUnis = [
  { id: 1, name: 'A.T. Still University' },
  { id: 2, name: 'Abilene Christian University' },
  // ...其他院校
];

// 选中逻辑通过ID查找
function onSelect(schoolId) {
  const selected = originalUnis.find(school => school.id === schoolId);
}

模板里传递ID：

filteredUnis.map((school) => (
  <div key={school.id} onClick={() => onSelect(school.id)}>
    {school.name}
  </div>
))

本质问题是展示的数据源（过滤后数组）和选中时的数据源（原数组）不匹配，只要保证选中操作的数据源和展示的一致，就能解决问题。优先推荐直接传递元素或使用唯一ID，避免依赖易变的索引。

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