Short answer:
When we call setDataSource(dataLog)
inside the useEffect hooks for initial render (mounting) that would save empty array in dataSource
variable, which can be used for showing empty list icon or loading, we have to set data source again when the data is fetched so, we can use another useEffect hook for logs
state variable and set data source in it.
useEffect(() => {
setDataSource(dataLog);
}, [logs]);
Details:
What we are trying to achieve with these hooks i.e. useEffect, is that we can write a code which can react when defined action occur, e.g. what we did in useEffect is that on initial render (mount phase), we set empty array and then call the API. After that when data arrives we set logs
i.e. setLogs(jsonData)
.
Which will populate the logs
variable, then that loop come into play and dataLog
will get filled but after that we never set the data source again with this DataLog
i.e. filled list of objects (we only did that in for mount phase in which dataLog
was empty, or when onChange get triggered)
So, a simple solution can be to use useEffect hooks for logs
variable so, whenever the logs
variable change, it will set the data source as well. As defined above in short answer.
Thus, with these hooks, we can significantly refactor this code.
One More Thing:
I recommend using getAllLogs
function with await
keyword, that will make that async code works like sync one i.e.
useEffect(async () => {
await getAllLogs();
}, []);
I (try to) reproduce it here
CLICK HERE to find out more related problems solutions.