I have a JSX file that exports a function.
Inside of it I want to assign a variable the result of a async function.
I cant use await without being inside an async function, which the exported function isnt.
If I wrap inside an anonymous async, I can get the result, but the promise doesnt return until after its needed for that part of page.
How do I update the page afterwards with the results?
UseEffect? Or useCallback?
This sounds like a JavaScript question. What does JSX have to do with it?
Has to do with component lifecycle and reactivity of the underlying data
would this address the issue?
import { fetchData } from './yourAsyncFile';
export function yourExportedFunction() {
// Call the asynchronous function and get a promise
const asyncOperation = fetchData();
// Use the then() method to handle the result when the promise is resolved
asyncOperation.then(result => {
console.log(result);
updatePage(result);
});
// Note: Code here will execute immediately and won't have access to the result.
// Make sure any logic dependent on the result is inside the then() block.
}
// Example function to update the page
function updatePage(result) {
// Update the page using the result of the asynchronous operation
console.log('Updating page with result:', result);
}
possibly. bookmarking for later. i found a way to make it work with useEffect. i gotta step away from this for a bit
