Estamos usando useMemo y useEffect cuando buscamos una matriz de datos. En el primer archivo, estoy configurando una const con los resultados del gancho (segundo archivo). Pero los resultados se establecen dos veces y la primera vez el resultado es un objeto vacío.
Necesitaría que se configure después de que useEffect haya hecho su trabajo.
Tenemos 2 archivos js
Primero.js
const dataArray = useGetDataArray({ name, id }); console.log("Data Array: ", dataArray);Segundo.js
export const useGetDatArray = ({ name, id } = {}) => { const [data, setData] = useState({}); const index = useMemo(() => { console.log("in useMemo"); const client = thirdPartyProvider; return client; }, []); useEffect(() => { console.log("in useEffect"); index .search(name, { numberOfResults: 12, }) .then(res => setData(_.get(res, "result"))); }, [index]); return data; };Mi consola se ve así
"in useMemo " "Data Array:" Object { } "in useEffect" "Data Array:" Array(12) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]asi me gustaria si es posible
"in useMemo" "in useEffect" "Data Array:" Array(12) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]Primero.js
useEffect(async () => { await useGetDataArray({ name, id }); const dataArray = myContainer.data; console.log("Data Array: ", dataArray); }, []);Segundo.js
export const useGetDatArray = ({ name, id } = {}) => { const index = useMemo(() => { console.log("in useMemo"); const client = thirdPartyProvider; return client; }, []); useEffect(async () => { console.log("in useEffect"); await myContainer.getData(index, name); }, [index]); };Contenedor.js
function myContainer(){ const [data, setData] = useState({}); const getData = async (index, name) => { const indexData = await index.search(name, { numberOfResults: 12 }); if (indexData) { await setData(indexData); } } return { data, getData }; } export const MyContainer = createContainer(myContainer);