从外部文件导出const至ReactSearchAutocomplete失效问题排查

1. 确认导出与导入的正确性 #

先检查外部文件的导出语法，确保是默认导出：

// pokemonList.js
const pokemonList = [
  { id: 1, name: "Bulbasaur" },
  // 剩余4100+项
];
export default pokemonList;

组件中导入时要保证路径准确（比如文件在src/data/下，就写./data/pokemonList）：

import pokemonList from './pokemonList';

导入后在组件内打印数组，确认数据是否加载成功：

function SearchComponent() {
  console.log('Loaded pokemon list:', pokemonList.length); // 正常应输出4100+
  // ... 组件逻辑
}

如果控制台输出长度为0或undefined，说明路径错误或导出有误，修正后再测试。

2. 匹配组件的搜索配置 #

ReactSearchAutocomplete依赖searchKeys指定搜索字段，必须和数组对象的键名完全一致（大小写敏感）：

<ReactSearchAutocomplete
  items={pokemonList}
  searchKeys={["name", "id"]} // 确保这里的键与数组内的键完全匹配，比如数组用"Name"就写"Name"
  minLength={1} // 按需调整，比如设为1允许单字符搜索
  onSelect={(selectedItem) => {
    // 选中后的逻辑
  }}
/>

如果数组对象用的是其他键名（比如pokeName而非name），必须同步修改searchKeys，否则组件找不到可搜索字段，会显示无结果。

3. 过滤无效数据 #

如果外部数组存在缺失id或name的项，会导致搜索匹配异常，导入后先过滤无效项：

const validPokemonList = pokemonList.filter(item => {
  return typeof item.id !== 'undefined' && typeof item.name !== 'undefined';
});

再将validPokemonList传给组件的items属性。

4. 排查版本兼容问题 #

如果上述步骤都无效，检查ReactSearchAutocomplete的版本，不同版本API可能有差异。比如旧版本可能要求searchKeys是单个字符串而非数组，或者items格式要求不同，对照你项目中该包的版本调整配置即可。

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