在 AsyncStorage React Native 上保存 Object 数组

Question

我正在尝试保存和读取本地存储中 object 数组的数据。保存过程已经完成，下面是我的 object 结构以提供更多见解：

有两种类型的类别：INCOME 和 OUTCOME，因此我在保存条目时将这些类别用作我的 KEY，完整代码如下所示：

const onSubmit = async () => {
    const newData = {
      category: type,
      title: title,
      note: note,
      amount: amount,
      date: date,
    };
    try {
      const jsonData = JSON.stringify(newData);
      let existingTransactions = await getTransaction(newData.category);
      const updatedTransactions = [...existingTransactions, jsonData];
      await AsyncStorage.setItem(
        newData.category,
        JSON.stringify(updatedTransactions)
      );
    } catch (err) {
      console.log(err);
    }
  };

  const getTransaction = async (category) => {
    let transactions = await AsyncStorage.getItem(category);
    if (transactions) {
      return JSON.parse(transactions);
    } else {
      return [];
    }
  };

基本上在保存新的 object 之前，我需要读取之前保存的数组，然后将新的 object 推入现有数组，最后使用 setItem 将它们全部保存。下面是 object 的数组，每当我保存新的 object 时它打印在控制台上：

我的问题是：

1.我用 KEY 做正确的事吗？或者我应该让每个 object 的密钥都是唯一的？

2。每当我尝试使用 getItem 读取这些数组然后映射数组时，我无法获得我想要的数据，我只能获得完整的 object 如下所示：

但我不能只说类别或每个 object 的标题。

这是我用来读取数组的代码：

const [data, setData] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const value = await AsyncStorage.getItem(category);
      const arrayData = JSON.parse(value);
      console.log(arrayData);
      setData(arrayData);
    }
    fetchData();
  }, []);
  
 {data.map((entry, index) => {
   return <Text key={index}>{entry}</Text>;
 })}

Answer 1

任何存储在 AsyncStorage 中的东西都应该有一个唯一的键来相应地获取它

您可以存储数组并相应地获取数组，然后按类别名称

获取特定的json对象

  let category = transactions.find(o => o.category === 'Your category name');

Answer 2

我熟悉 React.js，不熟悉 React Native。但是，根据我的阅读，您过早使用 JSON.stringify 犯了一个错误。

// const onSubmit = async () => {
// ...
    try {
      const jsonData = JSON.stringify(newData); // convert object to string
      let existingTransactions = await getTransaction(newData.category);
      const updatedTransactions = [...existingTransactions, jsonData]; // you're having array of string, not array of object
      await AsyncStorage.setItem(
        newData.category,
        JSON.stringify(updatedTransactions)
      );
    } 
// ...

先去掉 JSON.stringify，然后像这样稍微改变一下代码

// const onSubmit = async () => {
// ...
    try {
      let existingTransactions = await getTransaction(newData.category);
      const updatedTransactions = [...existingTransactions, newData]; // notice the newData here
      await AsyncStorage.setItem(
        newData.category,
        JSON.stringify(updatedTransactions)
      );
    } 
// ...

先清空存储，然后再试。 Demikianlah.

在 AsyncStorage React Native 上保存 Object 数组

Saving Array of Object on AsyncStorage React Native

javascript

arrays

react-native

local-storage

asyncstorage