Estoy usando la siguiente biblioteca para generar hashes sha256:
https://www.npmjs.com/package/crypto-hash
El hash está funcionando pero es asíncrono. Estoy tratando de averiguar cómo esperar a que se ejecute el siguiente código:
async function hashAnswers() { try { await sha256(firstAnswer) .then(hash => { setFirstHash(hash)}) await sha256(secondAnswer) .then(hash => { setSecondHash(hash)}) await sha256(thirdAnswer) .then(hash => { setThirdHash(hash)}) } catch (error) { console.log(error); } }y llamándolo aquí:
async function handleSubmit() { await hashAnswers().then(result => { console.log(firstHash); }) }Sin embargo, no espera a que las respuestas se conviertan en hash antes de iniciar sesión.
Gracias por adelantado
La solución propuesta en los comentarios para usar Promise.all es en realidad una buena sugerencia. Solo necesita que su función hashAnswers devuelva una tupla de valores que son hashes de las respuestas:
async function hashAnswers() { return Promise.all([ sha256(firstAnswer), sha256(secondAnswer), sha256(thirdAnswer), ]).catch(error => { console.log(error); return [null, null, null]; }); } Ahora su función handleSubmit tendrá acceso a los valores devueltos:
async function handleSubmit() { const [hash1, hash2, hash3] = await hashAnswers(); setFirstHash(hash1); setSecondHash(hash2); setThirdHash(hash3); console.log(hash1); } El primer problema es que en reaccionar, setState es asíncrono y no actualiza el estado inmediatamente. Por lo tanto, es posible que todas sus llamadas a setXHash , etc., no actualicen el estado antes de que esté listo para usarlas.
El segundo problema es que su función no tendrá acceso a los valores actualizados porque se actualizarán en una representación diferente del componente que será diferente de la representación actual en la que se llamó a la función. Recuerde que cada cambio de estado hace que todo el componente se vuelva a renderizar.
¿Solución?
Hay dos posibles soluciones:
useRef )La segunda opción puede ser la más fácil de implementar:
const firstHashRef = useRef(); // Do the same for secondHashRef, etc ... async function hashAnswers() { try { await sha256(firstAnswer) .then(hash => { firstHashRef.current = hash; }) await sha256(secondAnswer) .then(hash => { secondHashRef.current = hash; }) await sha256(thirdAnswer) .then(hash => { thirdHashRef.current = hash; }) } catch (error) { console.log(error); } } Ahora, en su función handleSubmit , puede console.log(firstHashRef.current) después de que finalice el asincrónico hashAnswers .
No es necesario await si está usando then . No estoy seguro de qué setFirstHash , setSecondHash , pero parece que Promise.all probablemente haría el trabajo por usted como lo sugirió Brian. Aquí está la esencia:
const hashAnswers = () => { const promises = []; try { promises.push( sha256(firstAnswer).then(hash => { setFirstHash(hash); return 'first is set'; }) ); promises.push( sha256(secondAnswer).then(hash => { setSecondHash(hash); return 'second is set' }) ); /* ... More push() calls ... */ return promises; } catch (error) { console.log(error); return []; } } const handleSubmit = () => { Promise.all(hashAnswers()) .then(result => { console.log(result); }) } Tenga en cuenta que, en caso de error, hashAnswers devuelve una matriz vacía solo para que Promise.all pueda resolverse, pero verá el mensaje de error a través de console.log(error);