下面是一个基于您的代码片段的示例。
变更：

• 从加载的口袋妖怪数据计算世代列表。
• 将所选层代存储为API提供的数值。
• 添加了useEffect，以确保所选生成始终有效。
• 添加了filter()，以将显示限制为选定代次。
• 更新了key以使用pokemon.id，这是一个更好的值，因为如果您在任何时间点重新排序或更改列表，它将需要做出React以做更少的工作。

import axios from "axios";
import React, { useEffect, useState, useMemo } from "react";
import Card from "./Card";

const Pokedex = () => {
    const [data, setData] = useState([]);

    // Get a list of generations from the data retrieved from the all pokemon api.
    const generations = useMemo(() => {
        // if data not yet loaded, return empty array (no generations).
        if (!data) {
            return [];
        }

        // get a list of all unique generations:
        //    - use list.map() to get the apiGeneration property of each pokemon.
        //    - use new Set(list) to restrict the list to only unique values.
        //    - use [...list] to change the Set back into an array.
        const allGenerations = [...new Set(data.map(x => x.apiGeneration))];

        // sort the list
        allGenerations.sort();

        // return the list of all generations.
        return allGenerations;
    }, [data])

    // state value to store the currently selected generation.
    const [selectedGeneration, setSelectedGeneration] = useState(undefined);

    // When ever the list of generations changes (should only be on reload of
    // pokemon data) ensure that the selected generation still exists, otherwise
    // set it back to all generations (undefined).
    useEffect(() => {
        setSelectedGeneration(c => {
            if (!!c && !generations.includes(c)) {
                return undefined;
            }

            return c;
        });
    }, [generations, setSelectedGeneration])

    // load pokemon data.
    useEffect(() => {
        axios
            .get("https://pokebuildapi.fr/api/v1/pokemon")
            .then((res) => setData(res.data));
    }, []);

    return (
        <div className="pokemons">
            <h2 id="search-title">Pokedex</h2>
            <p className="search-text">Recherhe par nom</p>
            <div>
                <input type="search" id="search-bar"></input>
            </div>

            <div className="gen-search">
                {
                    // loop through generations and create radio buttons
                    generations?.map((generation) => (
                        <ul className="radio-container">
                            <li>
                                <input
                                    type="radio"
                                    id={`generation-${generation}`}
                                    name="generationRadio"
                                    checked={generation === selectedGeneration}
                                    onChange={(e) => setSelectedGeneration(generation)}
                                />
                                <label htmlFor={`generation-${generation}`}>G{generation}</label>
                            </li>
                        </ul>
                    ))
                }
            </div>
            {
                // create button to clear generation filter.
                selectedGeneration && (
                    <button onClick={() => setSelectedGeneration(undefined)}>
                        Annuler la recherche
                    </button>
                )
            }
            <div className="pokemon-container">
                <ul>
                    {
                        // filter and map out pokemon.
                        data
                            .filter((pokemon) => {
                                // if no filter, return all pokemon.
                                if (!selectedGeneration) {
                                    return true;
                                }

                                // ensure pokemon matches selected generation.
                                return pokemon.apiGeneration === selectedGeneration;
                            })
                            .map((pokemon, index) => (
                                <Card key={pokemon.id} pokemon={pokemon} />
                            ))
                    }
                </ul>
            </div>
        </div>
    );
};

export default Pokedex;