警告：渲染不同组件时无法更新组件（`App`）

Question

我的 APP 组件中有一个名为 setScore( ) 的函数，它作为道具传递给我的 Popup 组件。我想根据弹出组件中的条件调用UpdateScore( ) 函数。但是，我也想根据条件调用 setScore( ) 方法，但它给了我上面列出的错误。

const Popup = ({user,correctLetters,wrongLetters,setPlayable,selectedWord, playAgain, currentQuestion, words, score, setScore, quitGame}) => {

    function UpdateScore() {

            if(!check){
                check = true;    
                setScore(score => (score + 1));               
            }    
    };

    if ((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion < words.length -1)){
        UpdateScore();
    } 
    else if((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion === words.length -1 )){
        UpdateScore();
    }

这不是完整的代码，但主要问题在于setState( ) 调用。我查看了其他帖子，他们通过将 setState 方法包装在 useEffect 中解决了这个问题，但随后它又给了我另一个错误：

无法有条件地渲染 useEffects。

知道如何解决这个问题吗？

Answer 1

可能以下工作：

const isWin =
  checkWin(correctLetters, wrongLetters, selectedWord) ===
    'win' &&
  currentQuestion <= words.length &&
  !check;
React.useEffect(() => {
  if (isWin) {
    check = true;
    setScore((score) => score + 1);
  }
}, [isWin, setScore]);

我确实看到了 check 的问题，并且感觉它应该在 useRef 中。

Answer 2

问题是你在组件的主体中调用了UpdateScore（即调用setScore），这不是 React 的工作方式。如果你想在Popup第一次渲染时执行if...else if，可以这样使用useEffect钩子：

useEffect(() => {
    if ((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion < words.length -1)){
        UpdateScore();
    } 
    else if((checkWin(correctLetters,wrongLetters,selectedWord) === 'win') && (currentQuestion === words.length -1 )){
        UpdateScore();
    }
}, [correctLetters, wrongLetters, selectedWord, currentQuestion, UpdateScore]);

实际上，每次correctLetters, wrongLetters, selectedWord, currentQuestion, UpdateScore 之一更改其值时都会触发此useEffect（但您需要将这些作为依赖项，否则您将收到“缺少依赖项”的警告）。