Функция поиска не отвечает в React

#javascript #reactjs #full-text-search

#javascript #reactjs #полнотекстовый поиск

Вопрос:

Я создаю функцию поиска во внешнем интерфейсе, используя функцию фильтра, она не выдает никаких ошибок, но не отвечает, я ввожу слово в строке поиска и нажимаю enter, и ничего не работает. Из журналов сервера я могу сказать, что при нажатии enter он не отправляет запрос к API. Ниже приведен мой код:

 function Search() {
  const [data, setData] = React.useState([]);
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchResults, setSearchResults] = React.useState([]);
  const handleChange = e => {
    setSearchTerm(e.target.value);
  };
  const getData = () => {
    axios.get("http://localhost:8000/CBView")
         .then(res => (setData(res.data)))
  }
  React.useEffect(() => {
    const results = data.filter(item =>
      item.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default Search;

Ответ №1:

Глядя на код, я вижу, что вам нужно вызывать API при изменении условия поиска, пожалуйста, посмотрите на код ниже

 import React from "react";

function Search() {
  const [data, setData] = React.useState([]);
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchResults, setSearchResults] = React.useState([]);
  const handleChange = e => {
    setSearchTerm(e.target.value);
  };
  const getData = () => {
    axios.get("http://localhost:8000/CBView").then(res => setData(res.data));
  };
  React.useEffect(() => {
    if (searchTerm) {
      getData();
    }
  }, [searchTerm]);

  React.useEffect(() => {
    if(data){
        const results = data.filter(item =>
            item.toLowerCase().includes(searchTerm)
        );
        setSearchResults(results); 
    }
  }, [data]);
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default Search;

1. Я думаю, что это может сработать, из того, что я могу проверить из журналов, теперь при вводе в строке поиска он отправляет запрос к API, но экран становится пустым, а использование моего процессора и оперативной памяти превышает 90%, и компьютер зависает.

2. я изменил api для реализации функции поиска в серверной части. Интерфейс обрабатывает вводимые данные поиска и извлекает результаты. Мое приложение по-прежнему зависает на моем компьютере. Что мне делать?

3. Я добавил условие для эффекта использования данных . Не могли бы вы попробовать это

Ответ №2:

Попробуйте исправить эту часть и посмотреть, работает ли она,

 React.useEffect(() => {
    const results = data.filter(item =>
      item.toLowerCase().search(searchTerm.toLowerCase()) !== -1
    );
    setSearchResults(results);
  }, [searchTerm]);