2

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.

1
  • Hay que compartir el código del custom hook useSound, saludos
    – g.4
    Commented el 16 may. 2021 a las 20:19

2 respuestas 2

2

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 });
// ...
2

Otra manera de solucionar el problema es pasando el valor de src como prop a un componente Button que se encargaria de reproducir el sonido usando useSound:

  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 Drumbox = () => {

  return (
      <DivBox id="drum-machine">
          <DivKeys>
            { drums.map(drum =>
              <Button key= {drum.id} {...drum}></Button>)}
             
          </DivKeys>
          <DivDisplay>
              <H1Display id="display">Display</H1Display >
          </DivDisplay>
      </DivBox >
  )
}




const Button = ({id, src}) => {
  const [play] = useSound(src)  
  return (
    <ButtonStyle 
      onClick={play}
      className = "drum-pad"
      id={id}
      src = {src}
    >{id}</ButtonStyle>
  )
}

Te recomiendo usar la función map para renderizar los array de datos y evitar repetir las mismas lineas en el código.

2
  • Muy interesante la propuesta, ¿Lograste emular el caso de tu lado? saludos
    – g.4
    Commented el 17 may. 2021 a las 1:34
  • Si, con algunos cambios en el JSX y la librería use-sound para usar useSound pude reproducirlo. Aquí dejo el link codesandbox.io/s/empty-browser-nd2mj?file=/src/App.js
    – davidbug
    Commented el 17 may. 2021 a las 3:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.