Как фильтровать данные API в React Native ⇐ Android

[Anonymous]

Я пытаюсь отфильтровать данные API в соответствии с введенным текстом при поиске, но не могу. Я перепробовал несколько ссылок и прочитал различную документацию по фильтру, но это оказалось недостаточно полезно.

Код: Выделить всё

import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Carousal, Heading, Input, List, Map } from '../components';
import { baseStyle, routes, theme } from '../config';
import axios from 'axios';

export const NearMe = () => {

const [responseData, setResponseData] = useState(undefined);
const [searchData, setSearchData] = useState([]);
const [search, setSearch] = useState('');

const getAPIData = async () => {
try {
const url = "https://6655-119-157-85-241.ngrok-free.app/listing";
let result = await fetch(url);
result = await result.json();
return result;
} catch (error) {
console.log(`error`)
console.error(error)
}
}
useState(async () => {
// const data = await getAPIData();
// setData(data);
try {
const url = "https://75b5-119-157-84-191.ngrok-free.app/listing";
let result = await fetch(url);
result = await result.json();
setResponseData(result.data);
setSearchData(result.data);
} catch (error) {
console.log(`error`)
console.error(error)
}
})

console.log(responseData)

const onSearch=(text)=>{
setSearch(
responseData.filter((item) =>
item.listing_area.toUpperCase().includes(text.toUpperCase()))
);
}

// axios.get('https://31bc-119-157-84-10.ngrok-free.app/listing')
// .then(response=> {
//   //Handle success
//   console.log(response.data);
// })
// .catch(error => {
//   console.log(error)
// });

// useEffect(() => {
//   axios.get('https://31bc-119-157-84-10.ngrok-free.app/listing')
//     .then(response => {
//       // Handle success
//       console.log(response.data);
//     })
//     .catch(error => {
//       // Handle error
//       console.log(error);
//     });

//   }, []);

// console.log("dasdadsa");
// console.log(responseData);
// return false;
// const data = {"success":true,"data":[{"id":2,"listing_title":"Zahid Nehari","listing_description":"test test test","listing_category":"Food","listing_area":"Saddar","listing_location":"Saddar"},{"id":1,"listing_title":"Zahid Nehari","listing_description":"test test test","listing_category":"Food","listing_area":"Saddar","listing_location":"Saddar"}],"message":"Data Found"};

const [carousalView, setCarousalView] = useState(true);
const navigation = useNavigation();

const toogleView = () => {
setCarousalView(!carousalView);
};

const navigationHandler = (data) => {
navigation.navigate(routes.VENUE_PROFILE, data);
};
//console.log(responseData);
return (



{
onSearch(txt);
}} />


Things To Do


{carousalView ? 'List View' : 'Carousel View'}



{carousalView ? (


) : (

)}

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: baseStyle.paddingHorizontal(10),
},
mapContainer: {
width: '100%',
height: (Dimensions.get('window').height * 50) / 100,
},
input: {
position: 'absolute',
top: 20,
width: '100%',
alignSelf: 'center',
paddingLeft: baseStyle.paddingLeft(15),
backgroundColor: theme.colors.lightGrey,
color: theme.colors.black,
},
heading: {
fontSize: baseStyle.fontSize(14),
lineHeight: baseStyle.lineHeight(17),
},
headingContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: baseStyle.marginTop(20),
},
});

Я получаю ответ в своем API, и данные отображаются правильно в виде карусели, а также в виде списка. Проблема в том, что мой поисковый запрос не работает. Каким может быть решение этой проблемы?

Подробнее здесь: https://stackoverflow.com/questions/764 ... act-native