javascript - 如何在 React Canvas 中正确卸载组件？它的工作，但给了我很多错误

Question

代码按我想要的方式工作。球出现，然后在球消失后出现种子。然而，如果你检查控制台，当球消失时，会有大约 1000 个错误。

我试图通过两种方式解决它。两者都失败了

  const ballsSetter = () =>{
    setBalls(true)
  }

  const seedsSetter = () =>{
    setBalls(false)
    setSeeds(true)
  }

  const timingOfLevel2 = () => {
    setTimeout(ballsSetter, 5000);
    setTimeout(seedsSetter, 15000);
    setTimeout(() => {console.log("the end")},20000);
  }

useEffect(()=>{
  timingOfLevel2()
},[])
  

const ifAttempt = () =>{
  if(balls){
    return  <>
    <EnemiesBallsReturn 
    enemyBall1Ref = {enemyBall1Ref}
    />
    </>
  } else if (seeds){
    return <>
     <EnemiesSeedsReturn 
    enemySeed1Ref = {enemySeed1Ref}
   /> 
    </>
  } 
}

并在 return 中返回 ifAttempt 函数

或者

>  {balls?   <EnemiesBallsReturn enemyBall1Ref = {enemyBall1Ref}/>:null}
   {seeds? <EnemiesSeedsReturn enemySeed1Ref = {enemySeed1Ref}/>:null}

无论哪种方式，当球或种子的状态为假时，它都会返回 null。而且我什么也没看到，但是当它切换到种子时会引发此错误。 基本上说它不能绘制一个未定义的 我理解，但它不应该检查任何 bc 它的未安装/空值？我很困惑任何帮助或方向将不胜感激