estoy teniendo problemas al manejar estado en react, actualmente estoy intentando hacer una caja de ritmos en donde si presiono el boton ejecute una funcion que primero me compara el id del boton y me devuelve la url del ritmo que estoy solicitando luego si hago un setState para guardar esa url en el estado, despues llamo a la funcion para reproducir el sonido, pero este me toma el estado anterio y no el actual, asi que si presiono primero un sonido lo guarda pero no lo reproduce, y si toco otro sonido me reproduce el sonido anterior y me guarda el nuevo y asi sucesivamente, he intentado de todo para solucionar el problema pero no encuentro la solucion, les estaria muy agradecido si alguno pdoria explicarme que esta pasando:
export const Drumbox = () => {
const drums = [
{
id: 'Q',
name: 'Heater 1',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
},
{
id: 'W',
name: 'Heater 2',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
},
{
id: 'E',
name: 'Heater 3',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
},
{
id: 'A',
name: 'Heater 4',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
},
{
id: 'S',
name: 'Clap',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
},
{
id: 'D',
name: 'Open HH',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
},
{
id: 'Z',
name: `Kick n' Hat`,
src: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
},
{
id: 'X',
name: 'Kick',
src: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
},
{
id: 'C',
name: 'Closed HH',
src: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
},
]
const [src, setsrc] = useState('')
const [playActive] = useSound(
`${src}`,
{ volume: 0.25 },
);
const setDrums = (e) => {
let i = 0
console.log(e)
drums.forEach(() => {
if(drums[i].id === e) {
setsrc(drums[i].src)
}
i++
})
}
const handleClick = (e) => {
setDrums(e.target.id)
playActive()
}
return (
<DivBox id="drum-machine">
<DivKeys>
<ButtonStyle onClick={handleClick} className="drum-pad" id="Q"><audio src="../BOMBO.wav"></audio>Q</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="W" >W</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="E" >E</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="A" >A</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="S" >S</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="D">D</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="Z">Z</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="X">X</ButtonStyle>
<ButtonStyle onClick={handleClick} className="drum-pad" id="C">C</ButtonStyle>
</DivKeys>
<DivDisplay>
<H1Display id="display">Display</H1Display>
</DivDisplay>
</DivBox>
)
}
Gracias por su atencion.
useSound
, saludos