嘗試更改變量的狀態時，React Too Many 重新渲染錯誤

Question

我不知道為什么我會收到這個錯誤，我一直在網上尋找答案，但我似乎無法弄清楚。 錯誤來自當我嘗試在按下“Enter”鍵時更改狀態變量的狀態時。 我還是個新手，所以任何幫助將不勝感激！！

這是錯誤信息

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
  20 |      
  21 |      case "Enter":
  22 |        if(timerState === false){
> 23 |          setTimerState(true);
     | ^  24 |        }
  25 |          break;
  26 | 

這是有問題的文件

import React, { useState, useEffect } from 'react';
import { words } from "./words.json";
import TypingTest from './components/TypingTest';
import SignInModal from './components/SignInModal';
import TitleBar from './components/TitleBar';
import Timer from './components/Timer';
import './App.css';
import { ThemeProvider } from 'styled-components';

function App() {

  const [index, setIndex] = useState(0);
  const [showSignIn, setShowSignIn] = useState(false);
  const [timerState, setTimerState] = useState(false);

  const onKeyPress = (event) => {
    console.log("Current key: ", event.key);

    switch (event.key) {
            
      case "Enter":
        if(timerState === false){
          setTimerState(true);
        }
                break;

      case "Backspace":
        break;

            default:
        if(event.key === words[index]){
          setIndex((index) => index + 1);
        }
                break;
        }
    };

  const openSignIn = () => {
    setShowSignIn(prev => !prev);
  };

  useEffect(() => {
    document.addEventListener('keydown', onKeyPress);

    return () => {
      document.removeEventListener('keydown', onKeyPress);
    };
  }, [index])

  return (
    <div className="App">
      <TitleBar openSignIn={openSignIn} />
      <header className="App-header">
      </header>
      <div className="landing">
        {/* <Timer /> */}
        <TypingTest timerState={timerState} words={words} index={index}/>
        <button onClick = {() => setIndex(0)}>reset</button>
        <SignInModal showSignIn={showSignIn} setShowSignIn={setShowSignIn} />
      </div>
    </div>
  );
}

export default App;

Answer 1

首先，您必須關閉useEffect 。 只發生一次。 您可以在setState訪問您當前的狀態值

setState(currentState => {
    return currentState;
});

keydown 、 keypress和keyup事件導致組件重新渲染

我知道這個問題的解決方案，但我不確定它是主要解決方案，但它解決了問題

您可以將inside useEffect中的狀態定義為變量並更改它們的值

useEffect(() => {
    let timerState;
    const onKeypress = (e) => {
        // do anything
    }

    document.addEventListener("keypress", onKeypress);

    return () => {
        document.removeEventListener("keypress", onKeypress);
    }
}, []);

Answer 2

在具有依賴項的useEffect添加偵聽器意味着只要依賴項數組中的這些變量發生變化，您就會添加另一個偵聽器。 要在組件掛載時設置偵聽器，請將addEventListener方法放在具有空（或沒有）依賴項數組的useEffect中。

  useEffect(() => {
    document.addEventListener('keydown', onKeyPress);

    return () => {
      document.removeEventListener('keydown', onKeyPress);
    };
  }, [])