Skip to main content
se añadieron 331 caracteres en el cuerpo
Origen Enlace

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

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);
};

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

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);
};