useState 不更新数组

Question

我正在尝试使用 React naitve 从 firebase 获取一些日期，但我遇到了一些问题，我正在使用 useState 将我的 firebase 中的对象数组传递到我的代码中的数组，但是 useState 不从 firebase 传递数组并且我不知道为什么这是 getingProducts

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

这是产品名片

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;

在运行代码之后它没有给我任何错误，我尝试 console.log 来自我的 firebase 的数组它 return 与 firebase 中的产品，但是产品数组在我的 useState 中有零个元素，我不知道如何解决这个问题

This is the output of the 2 console.log

Answer 1

您的 renderItem 函数没有 return 任何东西。因此，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}
          />;
        }}
      />

Answer 2

您不能将匿名异步回调传递给 useEffect，您甚至不需要它，只需像这样调用函数即可。

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

此外，您应该在异步函数之外检查状态值，因为新值将在组件 re-render 之后可用，而不是立即在异步函数中可用。

Answer 3

也许这些代码可以解决它。

<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

useState 不更新数组

useState dont update the array

javascript

firebase

reactjs

react-native

expo