React Native 我无法使用 AsyncStorage 存储数组

Question

我是 React Native 的新手，我正在尝试在 ReactNative 中使用 AsyncStorage 存储和获取数组。

我有两个问题。

首先，不知道为什么，当我存储数据时，它只在第二次起作用，但我首先调用了useState的集合。

const handleAddTask = () => {
    Keyboard.dismiss();
    setTaskItems([...taskItems, task]);
    storeData(taskItems);
  };

其次，如何调用getData函数获取所有数据并显示出来？在 ReactNative 中是否有类似 .onInit、.onInitialize... 的东西？这是我的完整代码

const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);

  const handleAddTask = () => {
    Keyboard.dismiss();
    setTaskItems([...taskItems, task]);
    storeData(taskItems);
  };

  const completeTask = (index) => {
    var itemsCopy = [...taskItems];
    itemsCopy.splice(index, 1);
    setTaskItems(itemsCopy);
    storeData(taskItems);
  }

  const storeData = async (value) => {
    try {
      await AsyncStorage.setItem('@tasks', JSON.stringify(value))
      console.log('store', JSON.stringify(taskItems));
    } catch (e) {
      console.log('error');
    }
  }

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('@tasks')
      if(value !== null) {
        console.log('get', JSON.parse(value));
      } 
    } catch(e) {
      console.log('error get');
    }
  }

Answer 1

即使您在将新数据保存到本地存储之前更新状态 setTaskItems([...taskItems, task])，storeData(taskItems) 也会在状态更新和保存旧状态数据之前执行。

重构 handleAddTask 如下。

  const handleAddTask = () => {
   Keyboard.dismiss();

const newTaskItems = [...taskItems, task]
    setTaskItems(newTaskItems);
    storeData(newTaskItems);
  };

Answer 2

在 React 中更新状态不是很直观。它不是异步的，也不能等待。然而，它也没有立即完成 - 它被放入一个队列中，React 根据自己的规范进行优化。

这就是为什么 BYIRINGIRO Emmanuel 的答案是正确的，并且是在函数内部使用状态的最简单方法。如果你有一个状态更新，你需要传递到多个地方，将它设置为你函数中的一个变量，然后使用它。

如果您需要对组件内部的状态更新做出反应，请使用 useEffect 挂钩，并将状态变量添加到其依赖项数组中。只要状态变量发生变化，useEffect 中的函数就会运行。

React Native 我无法使用 AsyncStorage 存储数组

React Native I can not store an array with AsyncStorage

reactjs

react-native

asyncstorage

react-hooks