React调用父组件setState触发Cannot update component渲染报错求解

报错根因 #

• 第一个警告是因为你直接在Popup组件的顶层渲染逻辑中调用了父组件传入的setScore，组件渲染阶段执行状态更新会触发父组件重渲染，违反React渲染流程约定。
• 第二个报错是因为你将useEffect放在了if/else条件块中调用，React要求所有Hook必须在组件的最顶层调用，不能嵌套在条件、循环、函数内部。

修正方案 #

步骤1：替换临时变量为useRef #

你代码中的check变量需要用useRef存储，避免组件重渲染时变量值被重置，保证分数只累加一次。

步骤2：将状态更新逻辑移入顶层useEffect #

把判断是否需要更新分数的逻辑全部移到组件最顶层的useEffect中，依赖项填写所有触发判断的相关变量。

完整修正代码示例 #

import { useEffect, useRef } from 'react'

const Popup = ({user,correctLetters,wrongLetters,setPlayable,selectedWord, playAgain, currentQuestion, words, score, setScore, quitGame}) => {
  // 用useRef存储check状态，重渲染不丢失
  const check = useRef(false)

  // 顶层调用useEffect，无嵌套条件
  useEffect(() => {
    const winResult = checkWin(correctLetters, wrongLetters, selectedWord)
    if (winResult === 'win' && !check.current) {
      check.current = true
      setScore(prevScore => prevScore + 1)
    }
    // 如果需要在重置游戏时恢复check状态，可以在playAgain相关逻辑里加 check.current = false
  }, [correctLetters, wrongLetters, selectedWord, setScore])

  // 其余原有逻辑保留，删除之前顶层的if/else判断和UpdateScore函数
  // ...
}

原理说明 #

• useEffect的回调函数会在组件渲染完成后异步执行，不会打断当前组件和父组件的渲染流程，彻底避免渲染中更新状态的警告。
• 所有Hook都在组件最顶层调用，符合React Hook的调用规则，不会触发条件调用Hook的报错。
• 依赖项数组会监听相关变量的变化，只有变量更新时才会重新执行判断逻辑，性能更优。

内容的提问来源于stack exchange，提问作者Haroon Omer