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

Question

[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>
  )
}

Answer 1

[Yustas Alexu]

У вас в 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])

Comments

[ckatala]

А как нужно?

[Yustas Alexu]

ckatala, ну это больше был ответ на

По умолчанию ничего не должно отображаться

и

не убираются при очищении input

[Yustas Alexu]

ckatala, поставьте в useEffect условие что если query пустое, то не делать запрос.

[Yustas Alexu]

ckatala, а вот почему у вас все статьи отображаются, я не совсем понял. Вы проверяли, что возвращает сам запрос с query?

[ckatala]

Yustas Alexu, Если его удалить, поиск не будет совсем работать

[Yustas Alexu]

ckatala, удалить что? запрос? Нет, я не писал, что его нужно удалить. Нужно поставить условие.

[ckatala]

А как сделать, чтобы выводилось не более 5 результатов?

[Yustas Alexu]

Можно сделать так: data.slice(0, 5).results.map но вообще по хорошему лучше это делать на бэкенде. Например с помощью пагинации.