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

Question

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

播放器.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;

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

Answer 1

感谢您的反馈！我设法通过将 Player.js 中的代码更改为：

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

const Player = () => {
  const [playing, setPlaying] = useState(true); 
  const [audio] = useState(new Audio(teaser));

  const toggle = () => {
    setPlaying(!playing);
    playing ? audio.play() : audio.pause()
  };

  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;

Answer 2

您正在使用以下代码覆盖 toggle 的定义： const [toggle] = useAudio(url);。 Player.js 有多个toggle 的声明和定义。见：

 const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing, toggle];
  };

..
...
..
const [toggle] = useAudio(url);

因此出现错误Expected OnClick to be a function but provided a boolean