Estoy desarrollando un juego web con React en front y Symfony en back, estoy teniendo un problema con un useEffect en donde hago un promiseAll (también he probado useEffect separados para cada fetch) y es que fetchea todo el rato por lo que satura y relentiza todo, esto es debido a unas dependencias que tengo pero que son necesarias:
const GamePage = () => {
const { gameId } = useParams();
const [abilities, setAbilities] = useState([]);
const [enemies, setEnemies] = useState([]);
const [weapons, setWeapons] = useState([]);
const [amulet, setAmulet] = useState([]);
const [saves, setSaves] = useState([]);
const [heroe, setHeroe] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedSkill, setSelectedSkill] = useState(null);
const [selectedEnemy, setSelectedEnemy] = useState(null);
const [isAttacking, setIsAttacking] = useState(false)
useEffect(() => {
Promise.all([getSaveSlot(gameId), getWeaponsEquiped(), getAmuletEquiped()])
.then(([saveData, weaponsData, amuletData]) => {
setSaves(saveData);
setAbilities(saveData.stage[0].heroes[0].abilities);
setHeroe(saveData.stage[0].heroes[0]);
setEnemies(saveData.stage[0].enemies);
setWeapons(weaponsData);
setAmulet(amuletData);
})
.catch((error) => {
console.error("Error:", error);
setLoading(false);
})
.finally(() => {
setLoading(false);
});
}, [ saves, weapons, amulet ]);
useEffect(() => {
const attackHeroe = async () => {
if (selectedSkill && selectedEnemy) {
try {
setIsAttacking(true);
console.log(isAttacking);
await getWithAuth(`/heroe/attack/${heroe.id}/${selectedEnemy}/${selectedSkill}`);
} catch (error) {
console.error("Error:", error);
} finally {
setSelectedSkill(null);
setSelectedEnemy(null);
setIsAttacking(false);
console.log(isAttacking);
}
}
};
attackHeroe();
}, [selectedSkill, selectedEnemy]);
return (
<>
{loading ? (
<>
<div className="bg-auto font-pixel size-screen bg-gradient">
<div className=" bg-[url('/src/assets/images/background.png')] bg-[length:150px] bg-animation h-screen w-screen flex flex-col justify-center items-center">
<div className="h-screen w-screen font-pixelify flex justify-center items-center">
<Loading />
</div>
</div>
</div>
</>
) : (
<>
<Header saves={saves} />
<div className="bg-[url(/src/assets/images/game-background.png)] bg-cover h-[57.5vh]">
<Heroe heroe={heroe} weapons={weapons} isAttacking={isAttacking}/>
<Enemies enemies={enemies} setSelectedEnemy={setSelectedEnemy}/>
</div>
<Footer abilities={abilities} heroe={heroe} weapons={weapons} amulet={amulet} setSelectedSkill={setSelectedSkill} selectedSkill={selectedSkill}/>
</>
)}
</>
);
};
export default GamePage;
Como digo las dependencias que están en el useEffect son necesarias para hacer fetch de datos como de la vida de los enemigos a la hora de atacar o si me equipo algún arma o amuleto nuevo que esa data se fetchee por lo tanto son necesarios.
Las funciones fetch a las que llamo son así pero con diferentes url:
export async function getSaveSlot(saveSlotId) {
try {
return await getWithAuth(`/save/slot/${saveSlotId}`)
} catch (error) {
console.error("Error:", error);
throw error;
}
}
Toda ayuda se agradece, Gracias.
He probado a quitar las dependencias pero solo se actualiza una vez como debería y por lo tanto no fetchea todo el rato por lo que no es lo que busco.
He probado a separar el promiseAll en varios useEffect para separar las dependencias por si había algún tipo de conflicto o algo pero sigue haciendo lo mismo.
NuMeRo999 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.