React Native setItem in storage

问题

I have an forEach loop as follows:

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())

And result to upload is as follows:

[
    {
    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"
  }
]

But for some reason is AsyncStorage.getItem("vehicle_slot").then(json => console.log(JSON.parse(json)) only the second object, the first one is not added to storage.

Any advice?

回答1:

your XMLHttpRequest is going to run asynchronously. It's perfectly possible that your code might get to the

AsyncStorage.setItem('vehicle_slot', JSON.stringify(result_test), () => s_cb())

before the onload event has occurred, since that only happens when the request is done. You should add the setItem as a callback.

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));
  }
}

You should also be aware that AsyncStorage.setItem is asynchronous. The item does not get set immediately, and the setItem method returns a promise that resolves when the item is set. Try using await AsyncStorage.setItem if you're not passing it into some other function.

来源：https://stackoverflow.com/questions/43741606/react-native-setitem-in-storage