useState不更新陣列-有解無憂

我正在嘗試使用 react naitve 從 firebase 獲取一些日期，但我遇到了一些問題，我正在使用 useState 將我的 firebase 中的物件陣列傳遞給我的代碼中的一個陣列，但是 useState 不從 firebase 傳遞陣列，我不知道為什么會這樣是獲取產品的handleFunction

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

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

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

這是我用來展示我的產品的 FlatList

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

這是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;

運行代碼后，它沒有給我任何錯誤，我嘗試從我的 firebase 控制臺記錄陣列，它與 firebase 中的產品一起回傳，但是我的 useState 中的 products 陣列元素為零，我不知道如何解決這個問題

這是 2 console.log 的輸出

uj5u.com熱心網友回復：

也許這些代碼可以解決它。

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

不同之處在于，在 <productCard你必須用括號寫之前，或者如果你想用大括號寫，你必須寫 return

uj5u.com熱心網友回復：

您的renderItem函式不回傳任何內容。因此，productCard不會被渲染。

修復它如下。

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

uj5u.com熱心網友回復：

您不能將匿名異步回呼傳遞給 useEffect 甚至不需要它，只需像這樣呼叫函式即可。

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

另外，您應該在異步函式之外檢查狀態值，因為新值將在組件重新渲染后可用，而不是立即在異步函式中。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/477997.html

標籤：javascript 反应火力基地反应式世博会

上一篇：ReactNative，如何將可觸摸不透明度的顯示更改為單擊另一個時可見，再次單擊時不可見？

下一篇：在這種情況下如何清除超時？