I am working on a React app and am getting the following error
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
I know it has something to do with the async functions I'm calling under useEffect but I'm not sure how to fix it.
function App() {
const { user, authStatus } = useAuthenticator()
const [filesJson, setFilesJson] = useState(null);
console.log('Status:', authStatus,'User:', user)
// Move the logic here
useEffect(() => {
async function getUserFilesJson(user, bucket = 'overwatch-draft-v1') {
const username = user?.username;
if (!username) throw new Error('No username found');
const { items } = await list({
path: `${username}/`,
options: { bucket }
});
const log_cycle = {};
const status_overview = [];
const system_settings = [];
(items || []).forEach(item => {
const relPath = item.path.replace(`${username}/`, '');
const [folder, subfolder, ...rest] = relPath.split('/');
if (folder === 'log_cycle' && subfolder && rest.length && relPath.endsWith('.json')) {
const file = rest.join('/');
if (!log_cycle[subfolder]) log_cycle[subfolder] = [];
log_cycle[subfolder].push(file);
} else if (folder === 'status_overview' && subfolder && relPath.endsWith('.json')) {
status_overview.push(subfolder);
} else if (folder === 'system_settings' && subfolder && relPath.endsWith('.json')) {
system_settings.push(subfolder);
}
});
}
async function fetchFiles() {
if (user) {
const result = filesJson;
setFilesJson(result);
console.log('User files JSON:', result);
}
}
fetchFiles();
}, [user]);
I've tried taking some of the functions outside of the useEffect but it doesn't like that either. I also tried utilizing getUserFilesJson as a callable .jsx function but it didn't like that either.