en la aplicación nativa de reacción,
Estoy tratando de obtener datos de la función asíncrona que me devolverá Promise<AlarmType[] | indefinido>
Q1. entonces, en la función getAlarms.then(), el caso indefinido se filtra y se imprime una matriz vacía en mi consola.
y después de guardar el código en vscode, la consola imprime una matriz con los datos adecuados
P2. La razón por la que uso useLayoutEffect y useEffect por separado es que solo quiero separar el código de obtención de datos del código setOption del encabezado de navegación de reacción, pero no estoy seguro de si es una buena práctica
¿Hay mejores maneras de hacer esto? editar: estoy usando react-native-simple-alarm
const [alarms, setAlarms] = useState<AlarmType[]>([]); const fetchData = useCallback(() => { getAlarms().then(response => { if (response) setAlarms(response); else console.log('undefined | empty array returned'); }); }, []); useLayoutEffect(() => { fetchData(); const willFocusSubscription = navigation.addListener('focus', () => { fetchData(); }); console.log(alarms) // here, this function is called twice, and return empty array return willFocusSubscription; }, []); useEffect(() => { navigation.setOptions({ headerLeft: () => <Icon name="trash-can-outline" size={30} onPress={() => { deleteAllAlarms(); fetchData(); }}/>, headerTitle: 'Alarm', headerRight: () =><Icon name="plus" size={30} onPress={() => navigation.navigate('ModalStackView')}/>, }); }, []);en getAlarms.ts
export const getAlarms = async () => { try { return await RNGetAlarms(); } catch (error) { console.log('setting call error' + error); } };El useLayoutEffect se llama antes del ciclo de renderizado de React, lo que significa que antes de renderizar el contenido JSX en su código se llama a este gancho .
Entonces, si hay algún requisito antes de que JSX se procese, como cambiar el nombre del encabezado, mostrar los botones izquierdo o derecho del encabezado, etc.
y useEffect se llama después de que se completa el ciclo de renderizado inicial . cuando el código JSX finaliza con la parte de la interfaz de usuario de representación.
Entonces, creo que su código debería verse a continuación:
const [alarms, setAlarms] = useState<AlarmType[]>([]); const fetchData = useCallback(() => { getAlarms().then(response => { if (response) setAlarms(response); else console.log('undefined | empty array returned'); }); }, []); useEffect(() => { const willFocusSubscription = navigation.addListener('focus', () => { fetchData(); }); return willFocusSubscription; }, [fetchData, navigation]); useLayoutEffect(() => { navigation.setOptions({ headerLeft: () => <Icon name="trash-can-outline" size={30} onPress={() => { deleteAllAlarms(); fetchData(); }}/>, headerTitle: 'Alarm', headerRight: () =><Icon name="plus" size={30} onPress={() => navigation.navigate('ModalStackView')}/>, }); }, [deleteAllAlarms, fetchData, navigation]);