React Native使用AsyncStorage实现离线模式时数组项解析异常

嘿，我帮你找到问题的根源了！你现在遇到的离线时返回重复对象的问题，本质是因为每次调用workflowBuilding函数时，都把数据存在了同一个AsyncStorage key workflowBuildingData里。

你看，在displayingBuilding里，你用Promise.all循环处理多个建筑ID，每次循环都会调用workflowBuilding去请求对应ID的建筑数据。在线状态下，每次请求成功后，你都会把返回的数据覆盖写入同一个key中——这意味着最后一次请求的建筑数据会把之前所有的存储内容都替换掉。等到离线时，不管你请求哪个ID，取到的都是最后一次存储的那一条数据，自然三个结果全是重复的了。

解决方案：给每个建筑ID分配独立的存储key #

最简单的修改方式就是把当前请求的建筑ID作为存储key的一部分，这样每个建筑的数据都会存在单独的AsyncStorage条目里，不会互相覆盖。修改你的workflowBuilding函数如下：

export async function workflowBuilding(currentItem: string) {
  try {
    const apiURL = `${Config.API_URL}obj/Building?constraints=[{"key":"_id","constraint_type":"equals","value":"${currentItem}"}]`;
    // 检查网络连接
    const isConnected = await NetInfo.fetch().then(state => state.isConnected);

    if (isConnected) {
      // 在线时请求API
      const responseFetch = await fetch(apiURL, {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: `Bearer ${Config.API_KEY}`,
        },
      });
      const responseData = await responseFetch.json();
      // 修改存储key，带上当前建筑的ID
      await AsyncStorage.setItem(
        `workflowBuildingData_${currentItem}`,
        JSON.stringify(responseData),
      );
      console.warn('_____________________________________', responseData);
      return responseData;
    } else {
      // 离线时读取对应ID的存储数据
      const storedData = await AsyncStorage.getItem(`workflowBuildingData_${currentItem}`);
      if (storedData) {
        console.log('_____________________________________', storedData);
        return JSON.parse(storedData);
      }
    }
  } catch (error) {
    console.error('Erreur dans auth.tsx: function workflowBuilding', error);
  }
}

为什么这样能解决问题？ #

修改后，每个建筑的数据都会被存在workflowBuildingData_${建筑ID}这样的独立key下，不会再出现覆盖的情况。离线时，循环请求每个ID时，都会读取对应key里的专属数据，自然就能得到三个不同的对象了。

你可以在线状态下先测试一遍，然后去检查AsyncStorage里的存储条目，会发现每个建筑ID都有对应的存储内容，这样离线模式就正常啦！

备注：内容来源于stack exchange，提问作者Thomas Augot