useState 和 if 语句导致错误：重新渲染过多。 React 限制渲染次数以防止无限循环

Question

我正在尝试创建的是一个 React 组件，它在 prop boxToggle 的值为 true 时有条件地呈现，并且在用户单击退出按钮时也返回 null。我为实现这一点所做的是创建一个名为 displayUI 的本地 useState 并使用 if 语句将 displayUI 分配为 true 或 false（这可能是问题，但我无法确定原因），具体取决于 boxToggle 道具和 onClick 内部退出按钮。

但我在组件内部收到此错误：

未捕获的错误：重新渲染过多。 React 限制数量 渲染以防止无限循环。

这里是父组件（我使用 react-three-fiber）

import React, { useRef, useState } from 'react';
import './App.css';

//Packages
import * as THREE from 'three';
import { Canvas, useFrame } from 'react-three-fiber'



import {Box, OrbitControls} from 'drei';


//Components
import Header from './components/Header';
import Homepage from './components/Homepage';
import { Light } from 'three';

//Functions

  //Main App Function
function App() {
  

  const [boxToggle, setboxToggle] = useState(false);  

  return (
    <div className="App">
      <Header/>
      <Homepage boxToggle={boxToggle}/>
      <Canvas
        colorManagement 
        camera={{position: [0, 5, 10], fov: 60}}
        shadowMap
      >
        <Lights/>
        <RotatingBox
          onClick={()=> setboxToggle(true)}
        />
        <Floor/>
        {/* <OrbitControls/> OrbitControls causes problems with the Raycasting (onClick)*/}
      </Canvas>
    </div>
  );
}

  //Scene Lights
const Lights = () => {

  return (
    <>
      <directionalLight
        intensity={1.5}
        position={[0, 10, 5]}
        castShadow
        shadow-mapSize-width={1024}
        shadow-mapSize-height={1024}
        shadow-camera-far={50}
        shadow-camera-left={-10}
        shadow-camera-right={10}
        shadow-camera-top={10}
        shadow-camera-bottom={-10}
      />
      <ambientLight
        intensity={0.3}
      />
    </>
  )
}

  //Meshes
const RotatingBox = ({onClick})=> {

  const box = useRef();

  const [boxSize, setBoxSize] = useState(false);  

  useFrame(()=>(
    box.current.rotation.y = box.current.rotation.x += 0.01,
    console.log(boxSize)
    )
  )

  return (
      <>
        <Box
          args={ boxSize ? [1, 1, 1]: [2, 2, 2]}
          ref={box}
          castShadow
          onClick={onClick}//cant get onClick Working at all, drei or R3F
          onPointerOver={onClick= ()=> setBoxSize(true)}
        >
          <meshStandardMaterial 
            
            cast
            attach="material" 
            color='yellow'
          />
        </Box>
      </>
  )
}

const Floor = () => {
  return (
    <>
      <mesh
        onClick={()=> console.log("click")} 
        receiveShadow 
        rotation={[-Math.PI / 2, 0, 0]} 
        position={[0, -3, 0]}
      >
        <planeBufferGeometry attach='geometry' args={[100, 100]}/>
        <meshStandardMaterial opacity={1} attach='material'/>
      </mesh>
    </>
  )
}

export default App;

和子主页组件

import React, { useState } from 'react';
import styles from './Homepage.module.css'

const Homepage = ({boxToggle}) => {

    const [displayUI, setDisplayUI] = useState(false);

    if (boxToggle) { 
        setDisplayUI(true);
    }


    if (displayUI === true) {
        return (
            <div className={styles.container}>
                <button onClick={() => setDisplayUI(false)} className="exit">X</button>
                <div className={styles.title}>
                    <h1>Homepage</h1>
                </div>
                <div className={styles.menu}>
                    <h3>Option 1</h3>
                    <h3>Option 2</h3>
                    <h3>Option 3</h3>
                </div>
            </div>
        )
    } else return null
}

export default Homepage

我尝试了其他 stackoverflow 答案，但我无法将它们应用于我的。它们中的大多数与useEffect有关，或者它们缺少箭头功能。这让我感到困惑，我什至不知道从哪里开始，因为我不熟悉 Hooks。谢谢

Answer 1

我认为问题是由您的主页组件引起的。

const Homepage = ({boxToggle}) => {

    const [displayUI, setDisplayUI] = useState(false);

    //this generate error because it update the state directly when render
    /*if (boxToggle) {   
        setDisplayUI(true);
    }*/

    //we can fix it by wrap it with a useEffect hook so this effect only trigger when the boxToggle value change
    
    React.useEffect(()=>{
       if (boxToggle) {  
        setDisplayUI(true);
       }
   
    }, [boxToggle])  // <--- dependency that trigger the function call


    if (displayUI === true) {
        return (
            <div className={styles.container}>
                <button onClick={() => setDisplayUI(false)} className="exit">X</button>
                <div className={styles.title}>
                    <h1>Homepage</h1>
                </div>
                <div className={styles.menu}>
                    <h3>Option 1</h3>
                    <h3>Option 2</h3>
                    <h3>Option 3</h3>
                </div>
            </div>
        )
    } else return null
}