Question

0

182

Views

Cómo regresar de la promesa dentro de useEffect

Estoy creando mi primer gancho personalizado. Me gustaría que el gancho devuelva el tipo de deviceType que es el resultado de una Promise en el gancho.

Gancho:

 export default function useDeviceType() { // Finds the user's device type and sets the // screen orientation appropriately. useEffect(() => { getDeviceTypeAsync().then((deviceType) => { const orientationPromise = setScreenOrientation(deviceType); return deviceType }); }, []); }

Uso del anzuelo:

 export default function DevelopmentScreen() { const deviceType = useDeviceType(); console.log(deviceType) return null; }

Consola:

indefinido

Puede que tenga dificultades para entender el gancho useEffect , pero creo que debería ejecutarse completamente una vez aquí.

¿El artículo que se devuelve aún no está definido porque la Promise no se ha resuelto? Si es así, ¿cómo puedo usar el tipo de setScreenOrientation deviceType

Cuando hago console.log(deviceType) dentro del gancho useEffect obtengo la respuesta apropiada:

2

¡Gracias de antemano por la ayuda para entender esto!

Edición final:

 export default function useDeviceToSetOrientation() { const [orientation, setOrientation] = useState(null); useEffect(() => { getDeviceTypeAsync().then((type) => { const orientationPromise = setScreenOrientation(type); orientationPromise.then((data) => { setOrientation(data); }) }); }, []); return orientation }; export default function DevelopmentScreen() { const orientation = useDeviceToSetOrientation(); console.log(orientation) return null; }

Salida (correcta):

4

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T02:38:21.394Z

export default function useDeviceType() { const [deviceType, setDeviceType] = useState(); useEffect(() => { getDeviceTypeAsync().then((type) => { const orientationPromise = setScreenOrientation(type); setDeviceType(type); }); }, []); return deviceType }

Esto debería corregir el comportamiento y luego se podrá acceder a deviceType a través const deviceType = useDeviceType(); .

Lo que parece estar malinterpretando aquí es cómo funcionan los valores de retorno de useEffect . Puede leer sobre estoaquí , pero en realidad lo usamos para crear funciones de limpieza que se ejecutarán en el desmontaje de nuestro componente.

Editar: también puede ver en los documentos de React cómo se supone que los ganchos personalizados devuelven valores.

0

182