関数が発火しない原因を教えていただきたいです。

Question

前提・実現したいこと

ボタンクリックにより、togglingという関数を発火させて、playingのstateを変更したい。

発生している問題・エラーメッセージ

ボタンクリックでtogglingという関数を呼び出しているが、togglingが実行されず、playingの値が変更されないため、際レンダリングされずにAudioが再生されない。

該当のソースコード

const url = "http://www.ne.jp/asahi/music/myuu/wave/hana.mp3";
  const useAudio = (url: string) => {
    const [audio] = useState(new Audio(url));
    console.log(audio);
    const [playing, setPlaying] = useState(false);
    const toggling = useCallback(e => {
      setPlaying(!playing);
      console.log(playing);
    }, []);

    useEffect(() => {
      playing ? audio.play() : audio.pause();
    }, [playing]);

    useEffect(() => {
      audio.addEventListener("ended", () => setPlaying(false));
      return () => {
        audio.removeEventListener("ended", () => setPlaying(false));
      };
    }, []);

    return [playing, toggling];
  };
  const [playing, toggling] = useAudio(url);

audioPlayerProps: {
      buttonPlayProps: {
        buttonType: 2,
        onClickAction: () => {
          toggling;
        },
        label: playing ? "Pause" : "Play"
      }
    }

Answer 1

こうすればどうですか？

audioPlayerProps: {
      buttonPlayProps: {
        buttonType: 2,
        onClickAction: toggling,
        label: playing ? "Pause" : "Play"
      }
    }

問題文の書き方をすれば

audioPlayerProps: {
      buttonPlayProps: {
        onClickAction: () => { toggling; },
      }
    }

togglingの後にカッコがないから呼び出していません。toggling()にしてもいいですが、onClickActionはもともと事件のeをコールバックに渡しているけど() => {}の書き方ならば事件を捨ててしまいますので、直接にtogglingを代入するのをお勧めです。

Comments

[ryota-code]

ご回答ありがとうございます。
しかし、上記の方法では解決することができませんでした。

[YufanLou]

エラーメッセージとかありましたら教えてください。
どのフレームワークを使っていますか？前後文をもっと教えてください。