Как сделать поиск по данным API через query?
У меня есть функция 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])
Если нужно что то дописать, скажите
Источник: Stack Overflow на русском