useState dont update the array-CodePudding

iam trying to get some date from firebase using react naitve but iam having some problems , iam using useState to pass the array of objects in my firebase to an array in my code but the useState dont pass the array from firebase and i dont know why this is the handleFunction of getingProducts

const [products, setProducts] = useState([]);

  const getProductHandle = async () => {
    const arr = await getProducts();
    setProducts(arr);
    console.log(arr);
    console.log(products);
  };

  useEffect(async() => {
    await getProductHandle();
  }, []);

and this is the FlatList iam using to show my products

<FlatList
        data={products}
        // numColumns={2}
        renderItem={(itemData) => {
          <productCard
            productName={itemData.item.productName}
            price={itemData.item.price}
            details={itemData.item.details}
            type={itemData.item.type}
            image={itemData.item.image}
          />;
        }}
      />

and this is the productCard

const productCard = ({ productName, price, image, details, type }) => {
  return (
    <View style={{height:300, width:300 , borderWidth:1}}>
      <Image style={{ width: 100, height: 100 }} source={image} />
      <Text>
        {productName} {price} {details} {type}
      </Text>
    </View>
  );
};

export default productCard;

after running the code it doesnt give me any errors and i tried to console.log the array from my firebase it return with the products in the firebase , but the products array in my useState have zero elements and i dont know how to solve this problem

This is the output of the 2 console.log

CodePudding user response：

Your renderItem function does not return anything. Thus, the productCard won't be rendered.

Fix it as follows.

<FlatList
        data={products}
        // numColumns={2}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => {
          return <productCard
            productName={item.productName}
            price={item.price}
            details={item.details}
            type={item.type}
            image={item.image}
          />;
        }}
      />

CodePudding user response：

Maybe these codes can solve it.

<FlatList
        data={products}
        // numColumns={2}
        renderItem={(itemData) => ( <productCard
            productName={itemData.item.productName}
            price={itemData.item.price}
            details={itemData.item.details}
            type={itemData.item.type}
            image={itemData.item.image}
          />;
        )}
      />

The difference is that before <productCardyou have to write with parentheses or if you wanna with curly brackets, you must be write return

CodePudding user response：

You can not pass anonymous async callback to useEffect and you don't even need it, just call the function like this.

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

Plus you should check state value outside the async function because new value will be available after component re-render and not in the async function instantly.