在存储中反应Native setItem

时间:2017-05-02 15:18:57

标签: react-native asyncstorage

我有一个forEach循环如下:

let result_test = [];
forEach(result_to_upload, value => {
  if (value.picturepath) {
    let body = new FormData();
    const photo = {
      uri: value.picturepath,
      type: 'image/jpeg',
      name: value.pictureguid + '.jpg',
    };
    body.append('image', photo);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', data_url + "/manager/transport/sync/picture/?pictureguid=" + value.pictureguid);
    xhr.onload = (e) => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          result_test.push(
            {
              "vehicle_id": value.vehicle_id,
              "slot_id": value.slot_id,
              "area": value.area,
              "zone": value.zone,
              "aisle": value.aisle,
              "side": value.side,
              "col": value.col,
              "level": value.level,
              "position": value.position,
              "timestamp": value.timestamp,
              "picturepath": value.picturepath,
              "pictureguid": value.pictureguid,
              "reason": value.reason,
              "handled": value.handled,
              "uploaded": 1
            }
          );
        }
      }
    };
    xhr.onerror =  (e) => console.log('Error');
    xhr.send(body);
  } else {
    result_test.push(
      {
        "vehicle_id": value.vehicle_id,
        "slot_id": value.slot_id,
        "area": value.area,
        "zone": value.zone,
        "aisle": value.aisle,
        "side": value.side,
        "col": value.col,
        "level": value.level,
        "position": value.position,
        "timestamp": value.timestamp,
        "picturepath": value.picturepath,
        "pictureguid": value.pictureguid,
        "reason": value.reason,
        "handled": value.handled,
        "uploaded": 1
      }
    )
  }
});
AsyncStorage.setItem('vehicle_slot', JSON.stringify(result_test), () => s_cb())

上传的结果如下:

[
    {
    aisle:""
    area:""
    category_text: "CT"
    col:2
    color_text:"Argent"
    comment:""
    handled:0
    level:0
    make_text:"Peugeot"
    model_text:"208"
    pictureguid:"88e6a87b-b48b-4bfd-b42d-92964a34bef6"
    picturepath:
    "/Users/boris/Library/Developer/CoreSimulator/Devices/E5DB7769-6D3B-4B02-AA8F-CAF1B03AFCB7/data/Containers/Data/Application/DBCFB503-F8E1-42FF-8C2B-260A713AF7BC/Documents/2D840EFA-014C-48C0-8122-53D9A0F4A88E.jpg"
    position:0
    reason:"ENTER"
    reference:""
    registration:""
    side:"E"
    slot_id:2358
    tag_text:""
    timestamp:"201705021714"
    uploaded:0
    vehicle_id:1
    vin:"123456"
    zone:"A"
  },
  {
    aisle:""
    area:""
    category_text: "CT"
    col:2
    color_text:"Argent"
    comment:""
    handled:0
    level:0
    make_text:"Golf"
    model_text:"208"
    pictureguid:"88e6a87b-b48b-4bfd-b42d-92964a34bef6"
    picturepath:""
    position:0
    reason:"ENTER"
    reference:""
    registration:""
    side:"B"
    slot_id:2358
    tag_text:""
    timestamp:"201705021714"
    uploaded:0
    vehicle_id:1
    vin:"123456"
    zone:"A"
  }
]

但由于某种原因AsyncStorage.getItem("vehicle_slot").then(json => console.log(JSON.parse(json))只有第二个对象,第一个对象没有添加到存储中。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

您的XMLHttpRequest将以异步方式运行。您的代码完全有可能进入

AsyncStorage.setItem('vehicle_slot', JSON.stringify(result_test), () => s_cb())
之前发生onload事件之前的

,因为只有在请求完成时才会发生。您应该将setItem添加为回调。

resultToUpload.forEach(result => {
    if (result.picturepath) {
      // handle stuff here
      let xhr = new XMLHttpRequest();
      xhr.onload = (e) => {
        // handle other stuff
        result_test.push(/* data */);
        await storeInAsyncStorage(result_test, () => s_cb());
      };
   } else {
     // handle even more stuff
     result_test.push(/* different data */);
     await storeInAsyncStorage(result_test, () => s_cb());
   }
});

function storeInAsyncStorage(data, callback) {
  if(callback) {
    return AsyncStorage.setItem(JSON.stringify(data), callback);
  } else {
    return AsyncStorage.setItem(JSON.stringify(data));
  }
}

您还应该知道AsyncStorage.setItem 异步。该项目不会立即设置,setItem方法返回一个在设置项目时解析的promise。如果您没有将其传递给其他函数,请尝试使用await AsyncStorage.setItem