Tengo esta función asíncrona:
Lo que devuelve undefined en el primer renderizado y luego los datos de la búsqueda:
const [ MessageListDataProvider, useMessageListData ] = constate(() => { const [messagePath, useMessagePath] = useState(api.UNRESOLVED_MESSAGES_PATH) const getMessagePath = (newPath) => { useMessagePath(newPath) } const [messages, setMessages] = useState({}) const { value, loading, error, retry: refresh } = useAsyncRetry(async () => { if (!messages[messagePath] && !messages.links ) { return await api.fetchAllMessages(messagePath).then(async (data) => { const localData = await data let localMessages = { ...messages } localMessages = { ...localMessages, [messagePath] : localData.messages } localMessages = { ...localMessages, ['links'] : localData.links } console.log('localMessages', localMessages) return await localMessages }) } }, [messagePath]) console.log('value', value) return { getMessagePath, value, loading, error, refresh } }) value undefined MessageListView.jsx:23 value 23 undefined MessageListDataProvider.js:34 value undefined MessageListView.jsx:23 value 23 undefined MessageListDataProvider.js:28 localMessages {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}} MessageListDataProvider.js:34 value {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}} MessageListView.jsx:23 value 23 {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}} ¿Cómo puedo evitar que el valor devuelto no esté undefined , ya que me impide obtener un día en mi componente <MessageListView /> ?
Necesitas un estado de carga. Inicie el estado de carga y luego, dentro de MessageListView, muestre un cargador cuando el valor no esté definido. O condicionalmente, no muestre MessageListView en absoluto, sino un cargador en su lugar cuando el estado esté configurado para cargar. También es posible que desee envolver la llamada asíncrona en una devolución de llamada de useEffect de reacción, ya que es un efecto secundario.
La función asíncrona devolverá undefined cuando su declaración "si" falla; probablemente debería manejar mejor ese caso:
async () => { if (!messages[messagePath] && !messages.links ) { ... } else { return { /* something that's not undefined! */ } } }