警告：预期 `onClick` 侦听器是一个函数，而是得到一个 `boolean` 类型的值

问题描述

我正在使用 React。当我尝试从按钮播放音频时，我收到此错误。当网站只是一页网站时，一切都有效。然后我使用 react-router-dom 路由器、开关和路由将它变成了一个多页网站，所有东西都开始用 onClick 出错。我不确定出了什么问题或如何解决它。我对反应还很陌生。代码如下：

Player.js

import React,{ useState } from "react";
import "./Button.css";
import {useTranslation} from "react-i18next";
import teaser from '../sounds/teaser-final.mp3';


const Player = ({ url }) => {
  const useAudio = url => {
    const [audio] = useState(new Audio(teaser));
    const [playing,setPlaying] = useState(true); //nothing is playing on default
  
  const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing,toggle];
  };

  const [toggle] = useAudio(url);

  const {t} = useTranslation('common');
  return (
    <div>
      <audio id="player" style={{'display': 'none'}} src={teaser}></audio>
      <button 
      className="btns hero-button btn--outline btn--large"
      onClick={toggle}
      >
      {t('heroSection.button')}
      </button>
    </div>
  );
};

export default Player;

HeroSection.js（使用 Player.js 的文件）

import React from 'react'
import './HeroSection.css'
import Player from '../Player';

function HeroSection() {  
    return (
        <div className="hero-btns">
           <Player />
        </div>
        
    )
}

export default HeroSection;

App.js

import React,{ useState,useEffect } from 'react';
import './index.css';
import {BrowserRouter,Switch,Route} from 'react-router-dom';
import Axios from 'axios';
import AdminHome from './Components/auth/Admin';
import Login from './Components/auth/Login';
import Register from './Components/auth/Register';
import UserContext from './Context/UserContext';

import Navbar from './Components/Navbar/Navbar';
import HeroSection from './Components/HeroSection/HeroSection';
import ShareSection from './Components/ShareSection/ShareSection';
import Subscribe from './Components/Subscribe/Subscribe';
import Footer from './Components/Footer/Footer';
import About from './Components/About/About';
import TheApp from './Components/TheApp/TheApp';
import Contact from './Components/SocialSection/Contact';
import CookiesPopUp from './Components/Cookies/CookiesPopUp';

function Home() {
  return (
      <>
          <CookiesPopUp />
          <Navbar />
          <HeroSection />
          <ShareSection />
          <Subscribe />
          <TheApp />
          <About />
          <Contact />
          <Footer />
      </>
  );
};

function App() {
  const [userData,setUserData] = useState({
    token: undefined,user: undefined,});
  const [didMount,setDidMount] = useState(false);

  useEffect(() => {
    setDidMount(true);
    
    const checkedLoggedIn = async () => {
        let token = localStorage.getItem("auth-token");
        if(token === null) {
            localStorage.setItem("auth-token","");
            token = "";
        }
        const tokenRes = await Axios.post(
            "http://localhost:5000/users/tokenIsValid",null,{headers: { "x-auth-token": token }}
        );
        if (tokenRes.data) {
            const userRes = await Axios.get("http://localhost:5000/users/",{
                headers: { "x-auth-token": token },});
            setUserData({
                token,user: userRes.data,});
        }
        return () => setDidMount(false);
    };
    checkedLoggedIn();
  },[])

  if(!didMount) {
    return null;
  }

  return (
    <>
      <BrowserRouter>
        <UserContext.Provider value={{userData,setUserData}}>
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/admin" component={AdminHome} exact />
            <Route path="/admin/login" component={Login} exact />
            <Route path="/admin/register" component={Register} exact />
          </Switch>
        </UserContext.Provider>
      </BrowserRouter>
    </>
  );
}

export default App;

这是我尝试播放音频时在控制台中遇到的错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）