React Native setItem 在存储中

Question

我有一个如下的 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))只有第二个对象，第一个没有添加到存储中。

有什么建议吗？

Answer 1

您的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 方法会返回一个承诺，该承诺会在设置项目时解决。如果您没有将其传递给其他函数，请尝试使用 await AsyncStorage.setItem。