0

我正在尝试构建一个搜索功能来显示与 searchTerm 匹配的项目。我得到的数据来自 API，我想过滤掉除 searchedTerm 项目之外的所有项目，初始 API 调用运行一次，使用 useEffect 和 [] 回调

const changeFilterItem = (values) => {
    const data = [...item];
    const index = data.indexOf(values);
    if (index > -1) {
      data.splice(index, 1);
    } else {
      data.push(values);
    }
    setItem([...data]);
};

useEffect(() => {
    if (item !== null) {
        setLoading(true);
        let pokemonList = [];
        async function fetchData() {
            for (let i = 0; i < item.length; i++) {
                let response = await getAllPokemonByType(initialURLType, item[i]);
                const pokemons = [...response.pokemon, ...pokemonList];
                pokemonList = pokemons.slice(0);
            }
            console.log(pokemonList);
            await loadPokemonByFilter(pokemonList);
        }
        fetchData().then();
    }
}, [item]);

const loadPokemonByFilter = async (data) => {
    let _pokemonData = await Promise.all(
      data.map(async (pokemon) => {
        return await getPokemon(pokemon.pokemon);
      })
    );
    setPokemonData(_pokemonData);
    setLoading(false);
};

const renderSelected = (type) => {
    if (item.indexOf(type) === -1) {
      return "";
    }
    return classes.selected;
};
4

2 回答 2

0

到目前为止我所理解的是，您想从包含一些数据的数组中过滤掉数据。为此，您可以使用 matchSorter。这是其文档的链接： https ://github.com/kentcdodds/match-sorter

于 2020-04-15T20:55:27.453 回答
0 
const [master, setMaster] = React.useState([]);
const [filtered, setFiltered] = React.useState([]);

React.useEffect(() => {
  makeApiCall().then(response => {
    setMaster(response);
    setFiltered(response);
  });
}, []);

function filterData() {
  setFiltered(master.filter(n => n.name === 'valueFromTextInput' && n.age === 'valueFromTextInput'));
}

用于filtered要显示数据的数据网格。filterData从要进行过滤的函数中调用函数。

希望能帮助到你。

于 2020-04-15T21:12:06.863 回答