ReactJS пытается отфильтровать столбец в сетке с поиском - PullRequest
0 голосов
/ 02 мая 2020

Я пытаюсь создать поле ввода для поиска, которое фильтрует столбец жанра в сетке 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}/>
}

1 Ответ

0 голосов
/ 02 мая 2020

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...