如何解决反应过多的重新渲染错误？

Question

我试图从子组件内部触发模式，但出现以下错误。

Too many re-renders error

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

Onboard.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

Personaldetails.jsx

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

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

Answer 1

问题在Onboard.js中，在()=>handleShow(false)或handleShow之类的React组件中传递函数，因为函数未绑定到特定事件，所以每次渲染时都会调用它，应该是这样的

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

Answer 2

您为setShow设置了错误的回调。您每次重新渲染setShow时都会调用它。 ->循环无穷大

应传递如下回调：() => setShow(flase);