使用PokeAPI React的ID过滤

Question

我正在为我的Pokedex应用程序(第一个使用React的项目)做一个区域过滤器，我知道该做什么，但不能让它工作。PokeAPI没有按区域/世代返回数据的端点，但是当您获取所有口袋妖怪数据时，它们已经按生成顺序排序，因此我的方法是根据所选区域的不同，将数据的限制/偏移替换为口袋妖怪的"startId“和"endId”。如果选择"Johto“，则startId = 152和endId = 251)。问题是，我不知道如何实际地将它放在适当的位置，并使它与Type过滤器(它从Type端点获取数据)一起工作，并保持分页工作。

另外，如果有更好的方法，请告诉我！这是我想出来的，但并不意味着这是最好的方法。

这是要取的康斯特：

    const fetchPokemon = async () => {
        try {
            setLoading(true);
            var data = null;
            var promises = null;
            var selectType = selectedType.toLowerCase();
            if (selectType === "all") {
                data = await getPokemon(24, 24 * page);
                promises = data.results.map(async (pokemon) => {
                    return await getPokemonData(pokemon.url);
                });
                const results = await Promise.all(promises);
                setPokemon(results);
                setLoading(false);
                setTotal(Math.ceil(data.count / 25));
                setNotFound(false);
            } else {
                const { length, data } = await searchPokemonByType(
                    selectType,
                    24,
                    24 * page
                );
                promises = data.map(async (pokemon) => {
                    return await getPokemonData(pokemon.pokemon.url);
                });
                const results = await Promise.all(promises);
                setPokemon(results);
                setLoading(false);
                setTotal(Math.ceil(length / 25));
                setNotFound(false);
            }
        } catch (err) {}
    };

我不知道我是否应该张贴代码的其他部分，请让我知道我是否应该。

下面是整个应用程序的CodeSandbox链接：https://codesandbox.io/s/wasivispokedex-kyule7

Answer 1

我想到的唯一一件事就是:把所有的薄荷都拿来。储存到口袋妖怪状态。然后在口袋妖怪状态下创建分页。

您可以将区域写入对象。

const regions = {
    all: { name: "all", startId: 1, endId: 898 },
    kanto: { name: "kanto", startId: 1, endId: 151 },
    johto: { name: "johto", startId: 152, endId: 251 },
    hoenn: { name: "hoenn", startId: 252, endId: 386 },
    sinnoh: { name: "sinnoh", startId: 387, endId: 493 },
    unova: { name: "unova", startId: 494, endId: 649 },
    kalos: { name: "kalos", startId: 650, endId: 721 },
    alola: { name: "alola", startId: 722, endId: 809 },
    galar: { name: "galar", startId: 810, endId: 898 }
  };

因此，您可以使用：regions['johto'].startId (用于exmaple)获取开始和结束id。

还可以添加filtered pokemons状态- on更改区域(或任何更改)，您可以使用filter筛选要显示的结果。

setFilteredPokemons(() => {
      pokemon.filter((pokemon) => {
        return (
          pokemon.id > regions[e.target.value].startId &&
          pokemon.id < regions[e.target.value].endId
        );
      });
    });

最后，要检查过滤后的pokemons长度是否大于0，如果是，则要显示筛选出来的pokemons。如果不是，您希望显示口袋妖怪状态(从原始的提取)。您可以将分页应用于两者。

在本例中，我认为从服务器获取所有数据并在前端对其进行操作比在每次更改时调用fetch更好.(少走到服务器/api，更容易操作数据)

我希望这里有什么帮助。

我想在codesandbox中创建一个工作示例，但是我需要大量的代码折射器。因此，我想分享我的意见和建议。这样你就能自己搞清楚了。也许会有更少的变化。

如果你觉得这有帮助，如果你需要额外的信息，请告诉我。我会尽力帮忙的。