Question

我有一个多个components的列表，每个列表在单击时都打开一个Modal。我将方法onHide传递给每个Modal，一旦单击关闭按钮，它们应该关闭模态，但是什么也没有发生。

我记录了该点击并记录了该点击，但是当在modalClose中调用Seances.js时，状态没有改变。我在做什么错了？

Seances.js

    class Seances extends Component {

    constructor(props) {
        super(props);

        this.state = {
            modalShow: false
        };
    }


    render() {
        const seances = this.props.seances;
        const handleDeleteUser = this.props.handleDeleteUser;
        let modalClose = () => this.setState({ modalShow: false });

        return (

            <Fragment>
                {seances && seances.length > 0 ? (
                    seances.map(({devices, interval, startDate, endDate, status}, index) => (
                        <div className="card" style={{marginBottom: '7px', width: '100%'}} key={index} onClick={() => this.setState({ modalShow: true })}>
                            <div className="card-body">
                                <h5 className="card-title">Seansi nr: {index}</h5>
                                <p className="card-text">Seadmed: {devices}</p>
                                <p className="card-text">Algus aeg: {startDate}</p>
                                <p className="card-text">Lõpp aeg: {endDate}</p>
                                <p className="card-text">Intervall: {interval}</p>
                                <p className="card-text">Staatus: {status}</p>
                                <button type="button" className="close float-right" aria-label="Close"
                                        onClick={() => handleDeleteUser(index)}>
                                    <span aria-hidden="true">×</span>
                                </button>
                                <ResultModal id={1}
                                    show={this.state.modalShow}
                                    onHide={modalClose}/>
                            </div>


                        </div>
                    ))
                ) : (
                    <div>
                        <p>Aktiivsed seansid puuduvad</p>
                    </div>
                )}
            </Fragment>
        );
    }
}

Seances.propTypes = {
    handleDeleteUser: PropTypes.func.isRequired,
    seances: PropTypes.arrayOf(
        PropTypes.shape({
            devices: PropTypes.string.isRequired,
            interval: PropTypes.string.isRequired,
            startDate: PropTypes.string.isRequired,
            endDate: PropTypes.string.isRequired,
            status: PropTypes.string.isRequired
        })
    )
};
export default Seances;

ResultModal.js

    class ResultModal extends React.Component {

    changeHandler = event => {
        this.setState({ [event.target.devices]: event.target.value });
    };

    getPickerValue = (value) => {
        console.log(value);
    }

    render() {
        return (
            <Modal
                show={this.props.show} onHide={this.props.onHide}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Seance nr: 1
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <form>

                            {/*First row*/}
                            <MDBRow >
                                <MDBCol md="4" >
                                    <h4 id="section1"><strong>Result</strong></h4>
                                    <p>Integer eleifend massa nec sem rhoncus tristique. Mauris pulvinar justo vitae
                                        nisi pretium tincidunt. Nulla dolor nibh, porta ut fringilla vel, maximus at mauris.
                                        Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut aliquam
                                        malesuada turpis eu luctus. In eget sapien quis urna cursus tempus.
                                        In eu placerat elit, ut tristique justo</p>
                                </MDBCol>
                            </MDBRow>

                            <Button variant="secondary" onClick={this.props.onHide}>
                                Close
                            </Button>
                            <MDBBtn color="success" type="submit" className="float-right">
                                Convert to File
                            </MDBBtn>
                        </form>
                    </div>
                </Modal.Body>
            </Modal>
        );
    }
}

ResultModal.propTypes = {
    onHide: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired
};

export default ResultModal;

Answer 1

您不应将此代码调用到render方法中：

let modalClose = () => this.setState({ modalShow: false });

这里有一个doc，其中说：

渲染

在这里调用setState使您的组件成为产生无限循环的竞争者。 render应该保持纯净，并用于根据状态或道具有条件地在JSX片段/子组件之间切换。渲染中的回调可用于更新状态，然后根据更改重新渲染。

例如，您必须通过handleDeleteUser或单击关闭按钮来更改modalShow。

...
handleDeleteUser (e) {
   ...
   ...
   this.setState({ modalShow: false });
}
...

反应模态不关闭onClick

1 个答案: