В зависимости от того, выбираете ли вы сначала все книги, существует два способа go об этом.
Выборка всех книг и локальная фильтрация
По мере того, как вы выбираете все книги , вы можете просто отфильтровать локальный список книг следующим образом:
Книги хранятся в виде массива. В настоящее время вы передаете их компоненту AgGridReact
следующим образом:
<AgGridReact
rowData={rowData} // books array
// other props...
}
Независимо от того, какой массив вы передадите в подпункт rowData
, он будет визуализирован. Чтобы отобразить только подмножество книг, вы просто передаете подмножество книг вместо всех книг, используя функцию массива filter
:
<AgGridReact
rowData={rowData.filter(b => b.genre === "fantasy")}
// other props...
}
Теперь только книги с genre
, равным fantasy
будет передано AgGridReact
.
Очевидно, что вы хотите использовать значение search
ключа фильтра, а не фиксированную строку "fantasy".
rowData={rowData.filter(b => b.genre === search)}
Но есть ошибка здесь. Когда значение search
является пустой строкой, будут видны только книги с пустым жанром, но мы хотим показать все книги в этом случае.
Вы можете исправить это, используя search
строка, если она есть:
rowData={search ? rowData.filter(b => b.genre === search) : rowData}
Теперь книги будут фильтроваться по жанрам из пользовательского ввода.
Вызов конечной точки жанра
Создание API запросив изменение фильтра, вы можете просто изменить useEffect
на эффект, который запускается при появлении нового фильтра:
// where urlWithgenre === "http://url/library/books?genre="
useEffect(() => {
fetch(`${urlWithGenre}${search}`)
.then((res) => res.json())
.then((json) =>
json.map((res) => ({
title: res.title,
author: res.author,
genre: res.genre,
}))
)
.then((res) => setRowData(res))
}, [search]) // Notice that we add search variable to the dependency array
Поскольку переменная search
добавляется в массив зависимостей, это Эффект запускается всякий раз, когда изменяется значение поиска. Этот эффект также будет запускаться один раз при монтировании компонента, что приведет к получению всех книг.
Здесь есть ошибка, например, когда search
установлена в пустую строку ''
, мы хотим получить все книги, а не книги с указанным c жанром.
Вы можете изменить эффект следующим образом:
useEffect(() => {
fetch(search ? `${urlWithGenre}${search}` : url)
// rest of effect...
Это приведет к получению всех книг, если строка поиска пуста.
Очевидно, что это не очень эффективный способ обработки данных.
Например, если вы ищете fiction
, тогда ищите horror
, затем ищите fiction
опять же, мы уже столкнулись с проблемой получения художественных книг, но удалили их, когда искали книги ужасов. Лучше было бы хранить все, что мы выбираем локально, в случае, если пользователь ищет одну и ту же вещь более одного раза.
Может быть даже лучше ограничить ввод вводом всех возможных жанров. что API имеет, так что вы не можете искать жанры, которые не будут иметь никаких результатов.