React Native AsyncStorage 的问题并用新数据更新状态

Question

我在 React Native 应用程序中管理来自 AsyncStorage 的数据检索时遇到问题。我正在使用 AsyncStorage 来存储订单，并且无论将新订单添加到 AsyncStorage，我都希望动态更新我的组件。但是，我不知道该怎么做

`

import React, { useEffect, useState } from "react";
import { View } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import CartItems from "../../../components/cartItems";

function CartPage() {
  let order = [];

  async function getCartData() {
    try {
      const orderDataFromStorage = await AsyncStorage.getItem("order");
      if (orderDataFromStorage) {
        const parsedData = JSON.parse(orderDataFromStorage);
        order.push(parsedData)
        AsyncStorage.removeItem("order");
      }
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {getCartData}, [])

  return (
    <View>
      <CartItems orders={order} />
    </View>
  );
}

export default CartPage;

问题：我面临的问题是，无论将新订单添加到 AsyncStorage，我都不知道如何动态更新我的 CartPage 组件。目前，我的组件没有反映新数据。

期望的结果：我希望 CartPage 组件在将新订单添加到 AsyncStorage 时动态更新和显示所有订单，包括任何新添加的订单。

我尝试过的：我在 useEffect 挂钩中使用了 getCartData 函数来从 AsyncStorage 检索数据，但它似乎没有正确更新组件。

附加信息：AsyncStorage 中保存的数据结构为 JSON 格式，如下 { "chosedAddon": [], "order": ["Tom & Jerry", "Fries, mozzarella, tomato"], "price": 8, "数量": 1 }.é.

Answer 1

在 useEffect 中，您需要将 () 添加到函数中，即

getCartData()

。

此外，您还可以像这样在 useEffect 中添加依赖项。

import { useIsFocused } from "react-native";

const isFocus = useIsFocused();

useEffect(()=>{
   getCartData()
},[isFocus])

当该屏幕处于焦点状态时，它将获取数据。