Estoy tratando de devolver una función (cierre) desde una función asíncrona. Hasta ahora, tal como tengo las cosas, el space siempre es una promesa y no una función, aunque debería ser un cierre.
// ... const [space, set_space] = React.useState(false); React.useEffect( () => { API.SERVER(query, PAGE_SIZE) .then(response => set_space(response)); }, [query] ); React.useEffect( () => { console.log(space.constructor); if (space) { space(page) .then(response => set_titles(Array.from(response.data))); } }, [space, page] ); // ... // ... export default { SERVER:async function(search, width) { if (!search) { // return () => {}; search = DEFAULT_QUERY; } const all = (await axios.get(SEARCH_URL + `?search=${search}`)).data; console.log(all); const pages = chunk(all, width); // function pager(results) { // const dex = (results > width ? results / width : 0); // const next = pages[dex]; // return axios.get(SEARCH_URL + `?fromids=${next}`); // } // return pager; return function(results) { const dex = (results > width ? results / width : 0); const next = pages[dex]; return axios.get(SEARCH_URL + `?fromids=${next}`); }; // return pager; } }; space.constructor dice que es una Promesa, pero debería ser una función que devuelva la Promesa de axios, no una Promesa en sí misma. Realmente no puedo cambiar la forma en que se configura la API porque necesito mantener el lado del cliente de índice, luego recorrerlo cambiando el parámetro del espacio.
El problema es que set_space no maneja las funciones de la misma manera que otros valores.
Esto se debe a que los establecedores de estado de React pueden recibir una devolución de llamada que recibe el estado anterior como argumento.
Sin embargo, React no tiene forma de diferenciar entre una devolución de llamada y un valor que resulta ser una función. Entonces, React asumirá que es una devolución de llamada y la llamará, luego configurará el estado para que contenga su valor de retorno, otra Promesa.
Para poner la función en sí misma en el estado, puede crear una devolución de llamada que devuelva la función, así:
API.SERVER(query, PAGE_SIZE) .then(response => set_space(() => response));Hmmm... ¿solo quieres una función que en llamada te devuelva la promesa? ¿Qué hay de useCallback entonces?
const triggerAsync = React.useCallback( () => { return API.SERVER(query, PAGE_SIZE) .then(response => set_space(response)) }, [query] ); triggerAsync debería devolver una promesa cuando la ejecuta