仅在 React Native 中单击 2-3 次提交按钮后才使用 AsyncStorage 存储数据

Question

我在按下按钮时调用一个函数，使用 AsyncStorage 将我的数据存储在本地存储中。

下面是我使用 AsyncStorage

存储数据的代码

const [saveData, setSaveData] = useState([]);

const _submit = async (text, photo) => {
  let newItem;
  
  newItem = {
    description: text,
    imageURL: photo,
  };
  setSaveData(prevList => {
    prevList = prevList || [];
    if (prevList.length < 0) {
      return newItem;
    } else {
      return [...prevList, newItem];
    }
  });
  setLocalItem();
};

const setLocalItem = async () => {
  AsyncStorage.setItem('test2', JSON.stringify(saveData))
    .then(json => console.log('success!'))
    .catch(error => console.log('error!'));
};

const getLocalItem = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('test2');
    const list = JSON.parse(jsonValue);

    console.log('list: ', list);
  } catch (e) {
    console.log('error: ', e);
  }
};

<TouchableOpacity
  onPress={() => {
    _submit (text, photo);
  }}>
  <Text>save</Text>
</TouchableOpacity>

<TouchableOpacity
  onPress={() => {
    getLocalItem();
  }}>
  <Text>get item</Text>
</TouchableOpacity>

我的数据正在存储，但只有在我多次单击 save 按钮后才会存储。但是在控制台中，即使我只单击 save 按钮一次，我也会得到 success 。但是当我点击 get item 按钮时，如果 save 只被点击一次，我会在控制台中得到 null。

我不确定为什么我必须多次单击 save 才能存储我的数据。

Answer 1

您更新状态不正确。并且新状态将在下一次渲染中可用，因此应在状态更新后调用 setLocalItem。

const [saveData, setSaveData] = useState([]);

// this effect updates the storage whenever `saveData` changes
useEffect(() => {
    AsyncStorage.setItem('test2', JSON.stringify(saveData))
    .then(json => console.log('success!'))
    .catch(error => console.log('error!'));
}, [saveData])

const _submit = (text, photo) => {
  const newItem = {
    description: text,
    imageURL: photo,
  };

  // no conditions are required here as the initial state is an array
  setSaveData(prevList => [...prevList, newItem]);
};


const getLocalItem = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('test2');
    const list = JSON.parse(jsonValue);

    console.log('list: ', list);
  } catch (e) {
    console.log('error: ', e);
  }
};

仅在 React Native 中单击 2-3 次提交按钮后才使用 AsyncStorage 存储数据

Data getting stored using AsyncStorage only after 2-3 submit button clicks in react native

javascript

async-await

reactjs

react-native

asyncstorage