ReactJS пытается отфильтровать столбец в сетке с поиском

Question

Я пытаюсь создать поле ввода для поиска, которое фильтрует столбец жанра в сетке ag, используя reactjs. в основном конечная точка URL имеет другую конечную точку, поэтому я не могу просто запросить ее с = $ {search} в конце. поскольку URL для жанра - http://url/library/books?genre=, и я хочу, чтобы все книги отображались изначально, если это имеет смысл. Я не имею ни малейшего представления, как это сделать, поэтому любая помощь в правильном направлении будет признательна / ссылки на что-то, что поможет или что-нибудь еще. в настоящее время следующий код даст мне всю информацию, как я хочу, но мне просто нужно добавить поисковый запрос для фильтрации:

function App () {
  const [rowData, setRowData] = useState([]);
  const [search, setSearch] =useState ("");
  const url = "http://url/library/books";
 const columns = [ 
      {headerName: "Title", field: "title"},
      {headerName: "Author", field: "author"},
      {headerName: "Genre", field: "genre", sortable: true},
  ];

    useEffect(() => {
      fetch(url)
      .then(res => res.json())
      .then(json => json.map(res => {
        return{
        title: res.title,
        author: res.author,
        genre: res.genre,
    };
  })
      ).then(res => setRowData(res));
},[]);

return (
<SearchFilter onSubmit ={setSearch} />
<AgGridReact
        columnDefs={columns}
        rowData={rowData}
        pagination={true}
        paginationPageSize={20}/>
}

Answer 1

В зависимости от того, выбираете ли вы сначала все книги, существует два способа 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 имеет, так что вы не можете искать жанры, которые не будут иметь никаких результатов.