Как сделать поиск по данным API через query?

Рейтинг: 0Ответов: 0Опубликовано: 02.02.2023

У меня есть функция fetchData:

const fetchData = async() => {
   const req = await api(`cities?&limit=20&offset=${data ? data.length : 0}`,`GET`)
   setData(e => [...e ?? [], ...req?.data])
}

useEffect(() => {
   if (data === null)
   fetchData();
}, [])

из нее я получаю данные API такого формата: Есть массив объектов, в которых - id, и имя города

data [
   {id: 1, name: 'Абаза'}
   {id: 2, name: 'Абакан'}
   {id: 3, name: 'Абдулино'} 
   {id: 4, name: 'Абинск'}
   {id: 5, name: 'Агидель'}
]

Через map() я вывожу этот список кнопок с названиями этих городов. Также в инпуте я кидаю прослушку и записываю это в value

<Group>
   <Input onChange={event => setValue(event.target.value)} className='mb10' placeholder='Или найдите его в поиске..' />
   {data !== null ? <InfScroll onReachEnd={fetchData} showLoader={showLoader} loader={<Spinner}>
       {data.map((e, i) => <div key={i} i={e}>
          <SimpleCell onClick={() => setIdCity(e)} key={i} i={e}>{e.name}</SimpleCell
       </div>)}
    </InfScroll> : ""}
</Group>

Это весь мой функционал. В апи есть параметр "query=", в него я должен написать название города через encodeURI() вот как я пытаюсь сделать:

const fetchData = async() => {
   const req = await api(`cities?&limit=20&${test ? `query=${encodeURI(value)}` :''}offset=${data ? data.length : 0}`,`GET`)
   setData(e => [...e ?? [], ...req?.data])
}

 useEffect(() => {
        if (value > value.length)
            setTest(true)
            fetchData()
    }, [value])

Если нужно что то дописать, скажите

Ответы

Ответов пока нет.