@ckatala

Как правильно вывести результаты?

Ребята, подскажите, как правильно отобразить результаты полученные через axios?
Нужно, чтобы выводилось 5 результатов по совпадению. По умолчанию ничего не должно отображаться
В данный момент при нажатии на input и написания любого одного символа отображаются все статьи из базы и не убираются при очищении input
Сейчас набросал такой компонент
export default function Search() {
  const [query, setQuery] = useState('')
  const [data, setData] = useState({results: []})
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://localhost:8000/api/articles/?search=${query}`,
      )
      setData(result.data)
    }
    fetchData()
  }, [query])

  const handleSearch = e => {
    e.preventDefault()
    if (query) {
      Router.push(`/search/${query}`)
    }
  }

  return (
    <form onSubmit={handleSearch}>
      <input
        type='text'
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      {data.results.map(item => (
        <a href={item.slug} key={item.id}>
          {item.title}
        </a>
      ))}
    </form>
  )
}
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
У вас в useEffect зависимостью стоит query. Каждый раз когда query меняется, useEffect срабатывает заново и делает запрос на сервер, что в свою очередь приводит к обновлению data.
Попробуйте так:
useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://localhost:8000/api/articles/?search=${query}`,
      )
      setData(result.data)
    }
    if (query) {
        fetchData()
    }
  }, [query])
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы