Как отфильтровать данные, для которых установлено состояние в реакции

Question

Я пытаюсь создать функцию поиска, которая отображает элементы, соответствующие searchTerm. Данные, которые я получаю, поступают из API, я хочу отфильтровать все элементы, кроме элемента seekTerm, первоначальный вызов API выполняется один раз, с использованием useEffect и [] callback

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;
};

Answer 1

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 из функции, для которой вы хотите выполнить фильтрацию.

Надеюсь, это поможет.

Answer 2

Насколько я понял, вы хотите отфильтровать данные из массива, в котором есть некоторые данные. Для этого вы можете использовать matchSorter. Вот ссылка на документацию: https://github.com/kentcdodds/match-sorter