为什么使用useEffect使代码呈现两次？还是延迟？

Question

鼓垫组件

import PubSub from 'pubsub-js';
import React,{useState,useEffect,useRef} from 'react';
import {bankOne,bankTwo} from './Bank.js';
import './Drumpad.scss';

const Drumpad = () =>{
  const [bank,setBank] = useState(bankOne);
  const [isPowered, setIsPowered] = useState(false);
  const [soundName, setSoundName] = useState("");
  useEffect(
    ()=>{
      const mySub = PubSub.subscribe('changeBank',chooseBank);
      const mySecondSub = PubSub.subscribe('powerStatus',changePowerStatus);
      return () => {
        PubSub.unsubscribe(mySub);
        PubSub.unsubscribe(mySecondSub);
      };
    },[]
  );
  document.addEventListener('keydown', handleKeyPress);
  const chooseBank = (changeBank,{bankName}) => {
    bankName === 'Heater 1' ? setBank(bankOne) : setBank(bankTwo);
  };
  console.log(isPowered);
  const changePowerStatus = (powerStatus,{isOn}) =>{
    setIsPowered (isOn);
  }

  const handleClick = (event) => {
    if(isPowered){
      const audio = event.target.children[0];
      audio.play();
      audio.currentTime=0;
      const name = event.target.id;
      setSoundName(name);
      pubInfo();
    }
  };

  function handleKeyPress(event) {
    const key = event.key.toUpperCase();
    console.log(isPowered);
    if ("QWEASDZXC".includes(key) && isPowered) {
          document.getElementById(key).play();
          document.getElementById(key).currentTime = 0;
          const name = document.getElementById(key).parentElement.id;
          setSoundName(name);
          pubInfo();
     };
  };

  const pubInfo = () =>{
    PubSub.publish("updateInfo",{soundName});
  }

  return bank.map(sound =>{
    return <li key={sound.keyTrigger} className="Key">
             <button className="drum-pad" id={sound.id} onClick={handleClick}>
              <audio className="clip" id={sound.keyTrigger} src={sound.url}/>
              {sound.keyTrigger}
            </button>
            </li>
  })
}

export default Drumpad;

DrumControl组件

import PubSub from 'pubsub-js';
import React,{useState,useEffect} from 'react';
import './DrumControl.scss';
import { Switch } from 'antd';
import 'antd/dist/antd.css';

const DrumControl = () => {
  const [isOn,setIsOn] = useState(false);
  const [bankName,setBankName] = useState("Heater 1");
  const [info,setInfo] = useState("");

  useEffect(
    ()=> {
      pubPower();
      const myInfo = PubSub.subscribe("updateInfo",soundNameUpdate);
      return () => {
        PubSub.unsubscribe(myInfo);
      };
    }
  );

  const soundNameUpdate = (updateInfo,{soundName}) =>{
    setInfo(soundName);
  }

  const onOff = () =>{
    isOn ? setIsOn(false) : setIsOn(true);
    setInfo("");
  }

  const changeBankName = ()=>{
      bankName === "Heater 1" ? setBankName("Piano") : setBankName("Heater 1");
      setInfo(bankName);
      pubBank();
  }

  const pubBank = () =>{
    PubSub.publish('changeBank',{bankName});
  }

  const pubPower = () =>{
    PubSub.publish('powerStatus',{isOn});
  }

  const onclick = () =>{
    isOn ? changeBankName() : setInfo("");
  }

  return (
    <div className="drum-control">
      <header>
        <a className="navbar-brand text-dark" href="#">
        Sean Liu
        </a>
      </header>
      <p className="text-dark fw-bold">Power</p>
      <Switch onClick={onOff}/>
      <p id="display">{info}</p>

      <input type="range" className="form-range" min="0" max="100" id="volume-control"/>

      <p className="text-dark fw-bold">Bank</p>
      <Switch onClick={onclick}/>
    </div>
  );
}

export default DrumControl;

App.js

import './App.scss';
import DrumControl from './components/DrumControl';
import Drumpad from './components/Drumpad';
function App() {
  return (
    <div className="App">
      <div className="App-content" id="drum-machine">
        <div className="drum-keys">
          <Drumpad />
        </div>
        <DrumControl />
      </div>
    </div>
  );
}

export default App;

嗨，专家们，我刚开始编程，试着用反应钩来构建一个鼓式机器项目，现在我觉得我被困在的地方是useEffect reRender问题。当我切换开关按钮时，console.log(isPowered)执行两次，而且我还必须按两次键才能使myInfo执行和更新setInfo，请帮助我完成此操作。

Answer 1

您可以使用useCallback钩子来限制它；例如，我与您共享：

​

 const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(false);
  // const [page, setPage] = useState(0);
  let url = "https://newsapi.org/v2/top-headlines?country="in"&category="general"&apiKey"
  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(url);
      const json = await response.json();
      setArticles(json.articles);
    } catch (error) {
      throw error;
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

​