Javascript 如何修复反应过多的重新渲染错误？

我试图从子组件内部触发一个模态，但得到以下错误

重新渲染错误太多

我的父组件和子组件代码如下：

机载.jsx

import React from 'react'
import { Row } from 'react-bootstrap'

import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
import { Form } from './form'
import { FAQs } from './faq'
import { LeftCol, RightCol } from './styles'
import { Modal, Button } from 'react-bootstrap'

const OnboardPage = props => {
    const [show, setShow] = React.useState(false);
    const handleShow = (showValue) => setShow(showValue);

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <Form />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={handleShow(false)}>
                <Modal.Header closeButton>
                  <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                <Modal.Footer>
                  <Button variant="secondary" onClick={handleShow(false)}>
                    Close
                  </Button>
                  <Button variant="primary" onClick={handleShow(false)}>
                    Save Changes
                  </Button>
                </Modal.Footer>
            </Modal>
        </Row>
    )
}

export default OnboardPage

import React from 'react'

import { colors } from '../../../../res'
import { TitleText, CommonText, SubHeadingText } from '../../../commons/freelancer/texts'
import { Container, TitleRow, DetailsRow, DetailsItem, EditBtn } from './personalDetailsStyles'
import { Modal, Button } from 'react-bootstrap'
// import EditDetailsModal from './EditDetailsModal'

const PersonalDetails = ({parentShowFn}) => {

    return (

        <Container>
        <TitleRow>
            <TitleText>Personal Details</TitleText>
            <EditBtn onClick={() => parentShowFn(true)}>Edit</EditBtn>
        </TitleRow>
        </Container>
    )

}
    

export default PersonalDetails

从“React”导入React
从“react bootstrap”导入{Row}
从“/PersonalDetails”导入{PersonalDetails}
从“/EmailVerification”导入{EmailVerification}
从“./Form”导入{Form}
从“./faq”导入{faq}
从“./styles”导入{LeftCol，RightCol}
从“react bootstrap”导入{Modal，Button}
const OnboardPage=props=>{
const[show，setShow]=React.useState（false）；
常量handleShow=（showValue）=>setShow（showValue）；
返回(
模态标题
呜呜，你正在以模态的方式阅读这篇文章！
关
保存更改
)
}
导出默认OnboardPage

Personaldetails.jsx

import React from 'react'
import { Row } from 'react-bootstrap'

import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
import { Form } from './form'
import { FAQs } from './faq'
import { LeftCol, RightCol } from './styles'
import { Modal, Button } from 'react-bootstrap'

const OnboardPage = props => {
    const [show, setShow] = React.useState(false);
    const handleShow = (showValue) => setShow(showValue);

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <Form />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={handleShow(false)}>
                <Modal.Header closeButton>
                  <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                <Modal.Footer>
                  <Button variant="secondary" onClick={handleShow(false)}>
                    Close
                  </Button>
                  <Button variant="primary" onClick={handleShow(false)}>
                    Save Changes
                  </Button>
                </Modal.Footer>
            </Modal>
        </Row>
    )
}

export default OnboardPage

import React from 'react'

import { colors } from '../../../../res'
import { TitleText, CommonText, SubHeadingText } from '../../../commons/freelancer/texts'
import { Container, TitleRow, DetailsRow, DetailsItem, EditBtn } from './personalDetailsStyles'
import { Modal, Button } from 'react-bootstrap'
// import EditDetailsModal from './EditDetailsModal'

const PersonalDetails = ({parentShowFn}) => {

    return (

        <Container>
        <TitleRow>
            <TitleText>Personal Details</TitleText>
            <EditBtn onClick={() => parentShowFn(true)}>Edit</EditBtn>
        </TitleRow>
        </Container>
    )

}
    

export default PersonalDetails

从“React”导入React
从“../../../../res”导入{colors}
从“../../../commons/Freelorer/Text”导入{TitleText，CommonText，SubHeadingText}
从“/personalDetailsStyles”导入{Container，TitleRow，DetailsRow，DetailsItem，EditBtn}
从“react bootstrap”导入{Modal，Button}
//从“/EditDetailsDal”导入EditDetailsDal
const PersonalDetails=（{parentShowFn}）=>{
返回(
个人资料
parentShowFn（true）}>编辑
)
}
导出默认个人详细信息

---

我认为这可能是因为某些渲染函数被无限调用，但我似乎无法修复错误。

问题在于

board.js

，在React组件中传递函数，如

（）=>handleShow（false）

或

handleShow

，因为函数未绑定到特定事件，每次渲染时都会调用它，应该是这样的

import React from 'react'
import { Row } from 'react-bootstrap'

import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
import { Form } from './form'
import { FAQs } from './faq'
import { LeftCol, RightCol } from './styles'
import { Modal, Button } from 'react-bootstrap'

const OnboardPage = props => {
    const [show, setShow] = React.useState(false);
    const handleShow = (showValue) => setShow(showValue);

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <Form />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={()=>handleShow(false)}>
{/* It was getting called again and again and throwing limit error*/}
                <Modal.Header closeButton>
                  <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                <Modal.Footer>
                  <Button variant="secondary" onClick={()=>handleShow(false)}>
                    Close
                  </Button>
                  <Button variant="primary" onClick={()=>handleShow(false)}>
                    Save Changes
                  </Button>
                </Modal.Footer>
            </Modal>
        </Row>
    )
}

export default OnboardPage

从“React”导入React
从“react bootstrap”导入{Row}
从“/PersonalDetails”导入{PersonalDetails}
从“/EmailVerification”导入{EmailVerification}
从“./Form”导入{Form}
从“./faq”导入{faq}
从“./styles”导入{LeftCol，RightCol}
从“react bootstrap”导入{Modal，Button}
const OnboardPage=props=>{
const[show，setShow]=React.useState（false）；
常量handleShow=（showValue）=>setShow（showValue）；
返回(
handleShow（假）}>
{/*它被一次又一次地调用并抛出限制错误*/}
模态标题
呜呜，你正在以模态的方式阅读这篇文章！
handleShow（假）}>
关
handleShow（假）}>
保存更改
)
}
导出默认OnboardPage

问题出在

board.js

，在React组件中传递函数，如

（）=>handleShow（false）

或

handleShow

，因为函数在特定事件上没有绑定，所以每次渲染时都会调用它，应该是这样的

import React from 'react'
import { Row } from 'react-bootstrap'

import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
import { Form } from './form'
import { FAQs } from './faq'
import { LeftCol, RightCol } from './styles'
import { Modal, Button } from 'react-bootstrap'

const OnboardPage = props => {
    const [show, setShow] = React.useState(false);
    const handleShow = (showValue) => setShow(showValue);

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <Form />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={()=>handleShow(false)}>
{/* It was getting called again and again and throwing limit error*/}
                <Modal.Header closeButton>
                  <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                <Modal.Footer>
                  <Button variant="secondary" onClick={()=>handleShow(false)}>
                    Close
                  </Button>
                  <Button variant="primary" onClick={()=>handleShow(false)}>
                    Save Changes
                  </Button>
                </Modal.Footer>
            </Modal>
        </Row>
    )
}

export default OnboardPage

从“React”导入React
从“react bootstrap”导入{Row}
从“/PersonalDetails”导入{PersonalDetails}
从“/EmailVerification”导入{EmailVerification}
从“./Form”导入{Form}
从“./faq”导入{faq}
从“./styles”导入{LeftCol，RightCol}
从“react bootstrap”导入{Modal，Button}
const OnboardPage=props=>{
const[show，setShow]=React.useState（false）；
常量handleShow=（showValue）=>setShow（showValue）；
返回(
handleShow（假）}>
{/*它被一次又一次地调用并抛出限制错误*/}
模态标题
呜呜，你正在以模态的方式阅读这篇文章！
handleShow（假）}>
关
handleShow（假）}>
保存更改
)
}
导出默认OnboardPage

您为

setShow

设置了错误的回调。每次渲染时都调用setShow。->循环无限

---

应该传递如下回调：

（）=>setShow（flase）
您为
setShow
设置了错误的回调。每次渲染时都调用setShow。->循环无限

应该传递如下回调：
（）=>setShow（flase）
这是否回答了您的问题？您的按钮单击处理程序错误。他们在每次渲染时调用handleShow函数，这会无限触发重新渲染。你甚至不需要手绘。将单击处理程序更改为
（）=>设置显示（true）
或false。这是否回答了您的问题？您的按钮单击处理程序错误。他们在每次渲染时调用handleShow函数，这会无限触发重新渲染。你甚至不需要手绘。将单击处理程序更改为
（）=>设置显示（true）
或false。