React Native中如何获取指定数据并保存至AsyncStorage？

一、如何将祈祷时间字段保存到AsyncStorage #

首先确保你已安装并导入AsyncStorage（React Native 0.60+ 需使用 @react-native-async-storage/async-storage 库）：

import AsyncStorage from '@react-native-async-storage/async-storage';

在fetch的回调中添加保存逻辑即可，由于AsyncStorage是异步操作，推荐用async/await让代码更清晰：

const fetchPray = async county => {
  const url4 = '' + county;
  console.log(url4);
  fetch(url4)
    .then(response => response.json())
    .then(async pray => { // 标记回调为async以支持await
      setPray(pray);
      let index = pray.findIndex(d => d.MiladiTarihKisa === date);
      let selectData = pray[index];

      setVakitGunes(selectData.Gunes);
      setVakitImsak(selectData.Imsak);
      setVakitOgle(selectData.Ogle);
      setVakitIkindi(selectData.Ikindi);
      setVakitAksam(selectData.Aksam);
      setVakitYatsi(selectData.Yatsi);
      setGunTurkce(selectData.MiladiTarihUzun);

      // 整理需要保存的字段为对象
      const prayTimes = {
        Gunes: selectData.Gunes,
        Imsak: selectData.Imsak,
        Ogle: selectData.Ogle,
        Ikindi: selectData.Ikindi,
        Aksam: selectData.Aksam,
        Yatsi: selectData.Yatsi,
        MiladiTarihUzun: selectData.MiladiTarihUzun
      };

      try {
        // AsyncStorage仅支持字符串存储，需将对象转为JSON字符串
        await AsyncStorage.setItem('prayTimes', JSON.stringify(prayTimes));
        console.log('祈祷时间已成功保存');
      } catch (error) {
        console.error('保存祈祷时间失败:', error);
      }
    })
    .catch(error => {
      console.error('获取祈祷时间数据失败:', error);
    });
};

如果需要单独存储每个字段，也可以这样写：

try {
  await AsyncStorage.setItem('Gunes', selectData.Gunes);
  await AsyncStorage.setItem('Imsak', selectData.Imsak);
  // 其他字段同理
} catch (error) {
  console.error('保存失败:', error);
}

二、将AsyncStorage代码写入fetch回调中是否存在问题？ #

不存在本质问题，但需要注意几个细节：

• 必须处理错误：无论是fetch请求失败，还是AsyncStorage保存失败，都要通过.catch()或try/catch捕获错误，避免出现未处理的Promise rejection。
• 避免嵌套过深：如果后续有更多异步操作，建议改用async/await重构整个fetch逻辑，提升代码可读性：

  const fetchPray = async county => {
    const url4 = '' + county;
    console.log(url4);
    try {
      const response = await fetch(url4);
      const pray = await response.json();
      setPray(pray);
      let index = pray.findIndex(d => d.MiladiTarihKisa === date);
      let selectData = pray[index];
  
      // 更新状态
      setVakitGunes(selectData.Gunes);
      setVakitImsak(selectData.Imsak);
      // ...其他状态更新
  
      // 保存到AsyncStorage
      const prayTimes = {
        Gunes: selectData.Gunes,
        Imsak: selectData.Imsak,
        // ...其他字段
      };
      await AsyncStorage.setItem('prayTimes', JSON.stringify(prayTimes));
      console.log('保存成功');
    } catch (error) {
      console.error('请求或保存失败:', error);
    }
  };
  

• 校验数据有效性：确保selectData不为undefined（比如findIndex返回-1时），否则访问字段会报错，建议添加判断：

  if (selectData) {
    // 执行保存逻辑
  } else {
    console.log('未找到对应日期的祈祷时间');
  }
  

内容的提问来源于stack exchange，提问作者sweoguzhan