React-Bootstrap模态未关闭错误：在渲染其他组件时无法更新组件`OnboardPage`

问题描述

我还看到了其他一些错误相同的问题，但它们似乎并不能解决我的问题。

我有一个react-bootstrap模式，我试图从子组件内的按钮打开，但出现以下错误。

这是父组件：

OnboardPage.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 handleClose = (showValue) => setShow(false);
    const handleShow = (showValue) => setShow(true);

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <Form />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={handleClose}>
                <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={handleClose}>
                    Close
                  </Button>
                  <Button variant="primary" onClick={handleClose}>
                    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()}>Edit</EditBtn>
        </TitleRow>
    </Container>
    )

}
    

export default PersonalDetails

我已经看到了堆栈跟踪，并且我相信问题出在这里：

但是我不知道它是什么：/

解决方法

“编辑”按钮onClick道具

<Button onClick={parentShowFn()}>Edit</Button>

这是什么：在PersonalDetails的每个渲染上，这只会将show中的OnboardPage状态的状态重新设置为true，因此当模态为onHide事件被触发，状态更新将导致重新渲染，PersonalDetails将被重新渲染，因此由于上述代码，再次将show的状态设置为true

此外，handleShow不返回任何内容，因此，随后单击“编辑”按钮将不执行任何操作（即onClick={undefined}）。

我建议您重构onClick属性值以返回函数

<Button onClick={()=>parentShowFn()}>Edit</Button>