Las actualizaciones del estado pueden ser asíncronas.
Entonces, en el siguiente código, LINE 1 es asíncrona y es por eso que se llama a LINE 2 con el valor anterior (no el nuevo):
// Mejoré la función "setDrums" (pero este no fue el problema). "find" es mejor que "forEach" para este ejemplo.
const setDrums = (id) => {
const found = drums.find((drum) => drum.id === id);
if (found) {
setsrc(found.src); // LINE 1
}
};
const handleClick = (e) => {
setDrums(e.target.id);
playActive() // LINE 2
};
Para resolver este problema, puede utilizar un useEffect
:
useEffect(() => {
if (src) {
playActive(src);
}
}, [src]);
const handleClick = (e) => {
setDrums(e.target.id);
};
Editar:
También le recomendaría que cambie useSound
(custom react hook) a algo como esto.
useSound:
const useSound = (vol) => {
const playActive = (src) => {
// ...
};
return [playActive];
};
Y utilícelo así:
Drumbox:
// ...
const [playActive] = useSound({ volume: 0.25 });
// ...