RanderItem in React Native FlatList-CodePudding

I am using axios to fetch the data from API well that part is totally fine till my data is fetched and I am able to verify it in console.log but when I am trying to display the fetched data from RenderItem in FlatList, for that I havemade a showPoducts() function under which I defined the display code, but nothing is getting displayed over the screen and for verification I did console.log inside the function then I got to know my function is not getting called.

import React, { useState, useEffect } from 'react';
import { View, Text, SafeAreaView, FlatList } from 'react-native';
import axios from 'axios';

const baseUrl = 'https://fakestoreapi.com/products';
const App = () => {
  const [products, setProducts] = useState([]);

  async function getProducts() {
    try {
      const response = await axios.get(baseUrl);
      setProducts(response);
    } catch (error) {
      alert(error);
    }
  }

  const showProducts = ({ item }) => {
    return (
      <View>
        <Text>{item.id}</Text>
        <Text>{item.title}</Text>
        <Text>{item.image}</Text>
      </View>
    );
  };

  useEffect(getProducts, []);
  {
    console.log(products);
  }
  return (
    <SafeAreaView>
      <FlatList data={products} renderItem={showProducts} />
    </SafeAreaView>
  );
};

export default App;

console.log for products

Chromium Edge:
►[]
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}
Chromium Edge:
►[]
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}
Chromium Edge:
►[]
Chromium Edge:
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}
Chromium Edge:
Chromium Edge:
►[]
Chromium Edge:
Error: "pro is not defined" in ReferenceError: pro is not defined <<     at App (App.js.js:36:26 <<  <<     at ri ([snack internals]
...
Chromium Edge:
►[]
Chromium Edge:
►[]
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}
Chromium Edge:
►[]
Chromium Edge:
►[]
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}
Chromium Edge:
►{data:[…],status:200,statusText:"",headers:{…},config:{…},request:{}}

when I check log in showProducts

CodePudding user response：

change setProducts(response); to setProducts(response.data);

import React, { useState, useEffect } from 'react';
import { View, Text, SafeAreaView, FlatList } from 'react-native';
import axios from 'axios';

const baseUrl = 'https://fakestoreapi.com/products';
const App= () => {
  const [products, setProducts] = useState([]);

  const getProducts = async () => {
    try {
      const response = await axios.get(baseUrl);
      setProducts(response.data);
    } catch (error) {
      alert(error);
    }
  }

  const showProducts = ({ item }) => {
    return (
      <View>
        <Text>{item.id}</Text>
        <Text>{item.title}</Text>
        <Text>{item.image}</Text>
      </View>
    );
  };

  useEffect(() => {getProducts()}, []);

  return (
    <SafeAreaView>
      <FlatList data={products} renderItem={showProducts} keyExtractor={(item, index) => index.toString()}/>
    </SafeAreaView>
  );
};

export default App;

CodePudding user response：

Refactor getProducts function as below

  async function getProducts() {
    try {
      const response = await axios.get(baseUrl);
      // Data are accessible at response.data
      setProducts(response.data);
    } catch (error) {
      alert(error);
    }
  }

Preview Link - https://snack.expo.dev/@emmbyiringiro/faee8d