I am trying to get pagination data. first, it will get data from https://myapi/?page=1 then https://myapi/?page=2 https://myapi/?page=3 something like that but don't understand why I am getting this error
TypeError: undefined is not an object (evaluating 'iter[Symbol.iterator]')
This error is located at:
in Blog (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by MaybeScreen).....
here is my code:
const Blog = () => {
const [data, setData] = useState([]);
const [count, setCount] = useState(1);
const getBlogs = async () => {
try {
const response = await fetch(
`https://..../blog-api/?page=${count + 1}`
);
setCount(count + 1);
const json = await response.json();
setData((prev) => [...prev, ...json.results]);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
useEffect(() => {
getBlogs();
}, [count]);
return (
<>
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (......my oheres code
here is my API response look like:
Object {
"count": 4,
"next": "https://..../blog-api/?page=4",
"previous": "https://backendapi.farhyn.com/blog-api/?page=2",
"results": Array [
Object {
"author_first_name": "Mickel",
"author_last_name": "HARTHO",
"blog_body": "<p>test helo blog</p>",
},
Log the response getting from response.json(). I believe you are making mistake over here
const json = await response.json();
setData((prev) => [...prev, ...json.results]);
The reason for this error is that you are assigning single object to FlatList Data instead of array.
Make sure you have array in in data. Reason: setData({})