es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo establecer el orden de ejecución de las funciones dentro del gancho useEffect

06 Aug, 2023 Programación

Necesito que la función useProductList se ejecute y finalice todo el proceso antes de que la función randomProduct se ejecute.

Por alguna razón, no funciona cuando fetchData es una promesa, por lo que randomProduct no se ejecutará.

Incluso intenté sin Promise, nada funcionó.

mi hook personalizado

“`import { useState, useEffect } from "react";

export default function useProductList() {
const [productList, setProductObjsList] = useState([]);
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
let randomProducts = [];

const fetchData = () =>
new Promise(() => {
arr.splice(1, 7);
setProductObjsList(arr);
return arr;
});

const randomProduct = (productArr) => {
//some Math.random() and algorithm with the productArr
console.log("randomProduct()", productArr);
};

useEffect(() => {
fetchData().then((result) => randomProduct(result));
}, []);

return randomProducts;
}“`

CodeSandbox

Estaré encantado si alguien me abre los ojos y me muestra la manera correcta de hacerlo.

EDIT:
Mi función fetchData original

const fetchData = () =>
{
fetch('http://localhost:49573/WebService.asmx/ProductList')
.then((response) => response.text())
.then(
(xml) =>
new window.DOMParser().parseFromString(xml, 'text/xml')
.documentElement.firstChild.textContent
)
.then((jsonStr) => JSON.parse(jsonStr))
.then((data) => {
setProductObjsList(data);
})
});

función randomProduct

const randomProduct = (productObjectList) => {
const products = [...productObjectList];
for (let index = 0; index < products.length; index++) {
let idx = Math.floor(Math.random() * products.length);
randomProducts.push(products[idx]);
products.splice(idx, 1);
}
};

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para asegurarse de que la función randomProduct se ejecute solo después de que la función fetchData haya terminado de ejecutarse, puedes usar la sintaxis async/await en lugar de Promise.

    Así es como puedes modificar la función fetchData para usar async/await:

    const fetchData = async () => {
  const response = await fetch('http://localhost:49573/WebService.asmx/ProductList');
  const xml = await response.text();
  const jsonStr = new window.DOMParser()
    .parseFromString(xml, 'text/xml')
    .documentElement.firstChild.textContent;
  const data = JSON.parse(jsonStr);
  setProductObjsList(data);
  return data;
};

    Y luego modifica el hook useEffect para usar await en lugar de then:

    useEffect(() => {
  const fetchDataAndRandomize = async () => {
    const productData = await fetchData();
    randomProduct(productData);
  };
  fetchDataAndRandomize();
}, []);

    Esto asegurará que randomProduct se ejecute solo después de que fetchData haya terminado de ejecutarse.

Comments are closed.