Trying to update certain fields in useState array in React Native - arrays

Question

I'm trying to bring rows of data back from an SQLite database and then iterate through them so I can manipulate the data of each row to present them differently (ie, convert a date into a customised format).
Bringing the data back is fine (from the ReadEntries function), which I do in a useEffect so that it only runs once on the screen load, but the duplicating of the array and then updating the rows doesn't seem to work. I think it might have something to do with the fact setting the value of a useState array isn't quick enough to update for my duplicate array to then take a full snapshot of it.
It sometimes works when I save multiple times in VS Code, presumably because the state is already stored for subsequent screen refreshes.
useEffect(() => {
var results: SQLite.ResultSetRowList;
const response = async (): Promise<any> => {
await ReadEntries(projectID).then((value) => {
results = value as SQLite.ResultSetRowList;
setEntries(results.raw); //this works
let newEntries = [...entries];
for (let i = 0; i < newEntries.length; i++) {
let newStartDate = new Date(newEntries[i].startDate);
newEntries[i].dateOfEntry = newEntries[i].dateOfEntry;
newEntries[i].startDate =
newStartDate.getDate().toString() +
"/" +
newStartDate.getMonth().toString() +
"/" +
newStartDate.getFullYear().toString();
}
setEntries(newEntries);
});
};
response().catch((error) => {
"ERROR: " + error;
});
}, []);
Thanks

Answer 1

State updates with hooks are not only async but are also bound by closure. You should not reply on the updated state to trigger another change in the same function call
Check this post for more details on this: useState set method not reflecting change immediately
You can make use of the the fetched data to perform the operation
useEffect(() => {
var results: SQLite.ResultSetRowList;
const response = async (): Promise<any> => {
await ReadEntries(projectID).then((value) => {
results = value as SQLite.ResultSetRowList;
setEntries(results.raw); // This shouldn't be required.
let newEntries = [...results.raw]; // use results instead of entries
for (let i = 0; i < newEntries.length; i++) {
let newStartDate = new Date(newEntries[i].startDate);
newEntries[i].dateOfEntry = newEntries[i].dateOfEntry;
newEntries[i].startDate =
newStartDate.getDate().toString() +
"/" +
newStartDate.getMonth().toString() +
"/" +
newStartDate.getFullYear().toString();
}
setEntries(newEntries);
});
};
response().catch((error) => {
"ERROR: " + error;
});
}, []);

Answer 2

I achieved this by calling the .raw() function of the returned results, and looping through that array with forEach. I then created a new object (newarrayItem) and assigned the fields to the .raw() array values, then pushed that object into a blank array (newarray) that I assigned the type TentryItemString. Then passed this to the setEntries useState array.
useEffect(() => {
var results: SQLite.ResultSetRowList;
let newarray: TentryItemString[] = [];
const response = async (): Promise<any> => {
await ReadEntries(projectID).then((value) => {
results = value as SQLite.ResultSetRowList;
results.raw().forEach((element, index) => {
let newdate = "";
let newStartDate = new Date(element.startDate);
newdate =
newStartDate.getDate().toString() +
"/" +
(newStartDate.getMonth() + 1).toString() +
"/" +
newStartDate.getFullYear().toString();
var newarrayItem = {
dateOfEntry: "",
startDate: "",
};
newarrayItem.startDate = newdate;
newarrayItem.dateOfEntry = element.dateOfEntry;
newarray.push(newarrayItem);
});
});
newarray.reverse();
setEntries(newarray);
};
response().catch((error) => {
"ERROR: " + error;
});
}, []);
A couple of issues I found in doing this. One, if I initiated the newarrayItem by equalling it to an already created object (ie. var newarray = newarrayItem), the array.push() method seemed to overwrite all rows with the same information. That's why I've instantiated it there and then. The other issue was struggling with assigning the type to the useState as an array, but I finally achieved this with the following syntax:
const [entries, setEntries] = useState();
And all TentryItemString is, is:
type TentryItemString = {
dateOfEntry: string;
startDate: string;
};
Hope someone finds that helpful.