Estoy tratando de adjuntar un token JWT de AWS Cognito a las solicitudes de Uppy en mi componente de carga. Para obtener el token, creo que necesito una función asíncrona:

 async function getSessionToken() { const data = (await Auth.currentSession()).getAccessToken().getJwtToken() console.log(data) return data; }

Sin embargo, necesito el valor de getSessionToken (es decir, el token real) antes de inicializar mi componente Uppy. Para hacer esto, pensé que sería mejor usar useEffect , por lo que podría establecer el estado de una variable usando useState y renderizar el componente Uppy después de que getSessionToken devolviera un valor:

 const [tokenData, setTokenData] = useState(); useEffect(() => { console.log(tokenData) getSessionToken().then((token) => { setTokenData(token) }) }, []); return ( <> {tokenData === 'undefined' ? <Skeleton variant="rectangular" width={210} height={118} /> : <UppyComponent data={tokenData} />} </> )

donde UppyComponent es:

 function UppyComponent(props) { console.log(props.data) const uppy = useUppy(() => { return new Uppy({ debug: true, autoProceed: false, restrictions: { maxNumberOfFiles: 1, minNumberOfFiles: 1, allowedFileTypes: ['video/*'], requiredMetaFields: ['caption'], } }) .use(AwsS3Multipart, { limit: 4, companionUrl: 'http://localhost:3020/', companionHeaders: { 'Authorization': "Bearer " + props.data, 'uppy-auth-token': "Bearer " + props.data, } }) .use(GoldenRetriever) .on('complete', result => { console.log('successful files:', result.successful) console.log('failed files:', result.failed) }) }) return <Dashboard uppy={uppy} plugins={['DropTarget']} inline={true} target='.DashboardContainer' showProgressDetails={true} note='Video only, up to 1 MB' width='400' metaFields={[ { id: 'name', name: 'Name', placeholder: 'Give your work a title. ' }, { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' } ]} browserBackButtonClose={false} /> }

Sin embargo, noté que UppyComponent todavía se está inicializando/renderizando antes de que regrese getSessionToken . Mirando las solicitudes, veo que props.data aún no está definido en UppyComponent . Pensé que, dado que useEffect no establecería la variable de estado hasta después de getSessionToken regresara, props.data no se establecería hasta que getSessionToken también lo hiciera. ¿No es este el caso?

¿Y hay una solución?