useState 不更新数组

Question

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

Answer 1

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}
          />;
        }}
      />

Answer 2

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.

Answer 3

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 <productCard you have to write with parentheses or if you wanna with curly brackets, you must be write return