setItem in AsyncStorage doesn't work - reactjs

Question

I'm trying to upload some data to the server from React Native. The data is stored in AsyncStorage.
The data is as follows :
let vehicles = [
{
"id": 1,
"make_text": "Peugeot",
"model_text": "208",
"color_text": "Argent",
"category_text": "CT",
"tag_text": "",
"vin": "123456",
"registration": "",
"reference": "",
"comment": "",
"autralis_id": 151390
},
{
"id": 1,
"make_text": "Peugeot",
"model_text": "307",
"color_text": "Bleu",
"category_text": "CT",
"tag_text": "",
"vin": "654321",
"registration": "",
"reference": "",
"comment": "",
"autralis_id": 156413
}
]
And
let vehicle_slots = [
{
"vehicle_id": 1,
"slot_id": 118,
"area": "",
"zone": "B",
"aisle": "",
"side": "S",
"col": 2,
"level": 0,
"position": 0,
"timestamp": "201705021544",
"picturepath": "",
"pictureguid": "0a016bb9-b7bb-4dd7-a0bf-407ef31a0c1a",
"reason": "ENTER",
"handled": 0,
"uploaded": 0
},
{
"vehicle_id": 1,
"slot_id": 2521,
"area": "",
"zone": "C",
"aisle": "",
"side": "E",
"col": 4,
"level": 0,
"position": 0,
"timestamp": "201705021544",
"picturepath": "",
"pictureguid": "64c726e2-37ec-4ab7-8b57-b08e9899086a",
"reason": "ENTER",
"handled": 0,
"uploaded": 0
}
]
I want to send only those which have uploaded and handled property equals to 0.
Thus, first I get those values where uploaded and handled property is equal to 0. I do it as follows:
try {
let vehicle_data = await AsyncStorage.getItem('vehicle');
if (vehicle_data !== null){
// We have data!!
let vehicle_slot_data = await AsyncStorage.getItem('vehicle_slot');
if (vehicle_slot_data !== null){
vehicle_data = JSON.parse(vehicle_data);
vehicle_slot_data = JSON.parse(vehicle_slot_data);
let result_to_handle = [];
let result_to_upload = [];
vehicle_slot_data.forEach(v => {
let not_handled = vehicle_data.find(m => m.id === v.vehicle_id && v.handled === 0);
let not_uploaded = vehicle_data.find(m => m.id === v.vehicle_id && v.uploaded === 0);
if ( not_uploaded ) result_to_upload.push(that.renderData(v, not_uploaded)[0]);
if ( not_handled ) result_to_handle.push(that.renderData(v, not_handled)[0]);
});
//Here I have result_to_handle and result_to_upload with the data that I need to send to the server.
............
If result_to_handle and result_to_upload have length > 0 then I want to send them to the server and update the property handled and property uploaded to 1 in AsyncStorage.
I try to do it as follows :
..............
if (result_to_handle.length > 0){
let options = {
method: 'POST',
body: JSON.stringify(result_to_handle),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
};
fetch(data_url + "/manager/transport/sync/movements/", options)
.then(response => response.json())
.then(responseData => {
AsyncStorage.getItem('vehicle_slot')
.then(json => {
let data = [];
if (json) data = JSON.parse(json);
let result = [];
forEach(data, value => {
if( value.handled === 0 ){
value.handled = 1;
result.push(value);
}else{
result.push(value);
}
});
AsyncStorage.setItem('vehicle_slot', JSON.stringify(result))
});
});
}
if (result_to_upload.length > 0){
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) {
AsyncStorage.getItem('vehicle_slot')
.then(json => {
if (json){
let data = JSON.parse(json);
let result_data = [];
forEach(data, val => {
if( val.pictureguid === value.pictureguid ){
val.uploaded = 1;
result_data.push(val);
}else{
result_data.push(val);
}
});
AsyncStorage.setItem('vehicle_slot', JSON.stringify(result_data), () => s_cb())
}
});
}
}
};
xhr.onerror = (e) => console.log('Error');
xhr.send(body);
} else {
AsyncStorage.getItem('vehicle_slot')
.then(json => {
if (json){
let data = JSON.parse(json);
let result_data = [];
forEach(data, val => {
if( val.pictureguid === value.pictureguid ){
val.uploaded = 1;
result_data.push(val);
}else{
result_data.push(val);
}
});
AsyncStorage.setItem('vehicle_slot', JSON.stringify(result_data), () => s_cb())
}
});
}
});
}
But the result that I get is not correct.
The vehicle_slot from AsyncStorage is as follows:
[
{
"vehicle_id": 1,
"slot_id": 118,
"area": "",
"zone": "B",
"aisle": "",
"side": "S",
"col": 2,
"level": 0,
"position": 0,
"timestamp": "201705021544",
"picturepath": "",
"pictureguid": "0a016bb9-b7bb-4dd7-a0bf-407ef31a0c1a",
"reason": "ENTER",
"handled": 1,
"uploaded": 0
},
{
"vehicle_id": 1,
"slot_id": 2521,
"area": "",
"zone": "C",
"aisle": "",
"side": "E",
"col": 4,
"level": 0,
"position": 0,
"timestamp": "201705021544",
"picturepath": "",
"pictureguid": "64c726e2-37ec-4ab7-8b57-b08e9899086a",
"reason": "ENTER",
"handled": 1,
"uploaded": 1
}
]
Thus, for the first object is the value uploaded still equal to 0 but it should be equal to 1.
Any advice?