Svelte中如何为搜索到的Pokémon显示正确图片？

问题根源 #

你当前的代码中，selectedMonsters是过滤后的Pokémon数组，#each循环里的index是过滤后数组的索引，而非该Pokémon在初代列表中的真实编号。比如原列表中编号6的喷火龙，搜索后如果它是过滤结果的第一个，index会变成0，导致图片URL用0+1=1加载，最终显示的是编号1的妙蛙种子图片，完全不匹配。

修复步骤 #

核心思路是给每个Pokémon绑定真实的编号，替代依赖循环索引的方式：

1. 在获取数据时添加真实编号
   修改app.svelte中的onMount逻辑，从每个Pokémon的url字段中提取编号（PokeAPI的URL格式为https://pokeapi.co/api/v2/pokemon/{id}/），并添加到对象中：

   <script>
     import { onMount } from 'svelte';
     import PokemonCard from './PokemonCard.svelte';
     import { Circle3 } from 'svelte-loading-spinners';
     let pokemons = [];
   
     onMount(async () => {
       await new Promise((resolve) => setTimeout(resolve, 3000));
       const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');
       if (!response.ok) {
         throw new Error('Failed to fetch pokemons');
       }
       const data = await response.json();
       // 提取每个Pokémon的真实编号并添加到对象
       pokemons = data.results.map(pokemon => {
         const id = pokemon.url.split('/').filter(Boolean).pop();
         return { ...pokemon, id };
       });
     });
     let searchString = '';
     $: selectedMonsters = pokemons.filter((pokemon) => {
       return pokemon.name
         .toLowerCase()
         .includes(searchString.toLocaleLowerCase());
     });
   </script>
   

2. 修改循环传递真实编号
   在#each循环中，传递提取到的id而非循环index：

   <main>
     <header>
       <input
         class="search"
         type="text"
         bind:value={searchString}
         placeholder="Pokemon Name"
       />
     </header>
     <div class="container">
       <ul class="grid">
         {#each selectedMonsters as { name, id }}
           <PokemonCard {name} {id} />
         {:else}
           <div class="center">
             <h1>First generation Pokémons are loading...</h1>
             <Circle3 />
           </div>
         {/each}
       </ul>
     </div>
   </main>
   

3. 更新卡片组件使用真实编号
   修改PokemonCard.svelte，用真实编号构建图片URL：

   <script>
     export let name;
     export let id;
     const imgUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;
   </script>
   
   <div class="Card">
     <h2>{name}</h2>
   
     <div>
       <img src={imgUrl} alt={name} style="width: 150px; height: 150px;" />
     </div>
   </div>
   

效果验证 #

修改后，无论搜索过滤后的结果顺序如何，每个Pokémon都会加载对应编号的图片，彻底解决不匹配的问题。

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