javascript - 渲染后将状态变量设置为 false

Question

当 showModal 变量设置为 true 时，我有一个模式(某种自定义 toast)，它会显示在名为 Details 的以下类中。

class Details extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            code: null,
            publication: null,
            loading: false,
            circleloading: false,
            showModal: false
        };
        this.setReady = this.setReady.bind(this);
    }

    handleSendMessage(event, errors) {

        event.preventDefault();
        let currentComponent = this;

        let ownerEmail = this.state.publication.userEmail;
        let title = this.state.publication.title;
        let emailDTO = JsonService.getJSONParsed(event.target);
        emailDTO.ownerEmail = ownerEmail;
        emailDTO.title = title;

        if (Object.keys(errors).length === 0) {
            this.setState({
                loading: true,
                showModal: false,
            });

            UserService.sendMessage(emailDTO).then(function(response) {
                currentComponent.setState({
                    loading: false,
                    showModal: true, // This works fine, but it turns out the modal then gets shown after every render
                });

            });
        }
    }

    render() {

        return (
            <div>
                <ToastNotification
                    show={this.state.showModal}
                    title={t('details.messageTitle')}
                    information={t('details.messageDetail')}
                    type='Information'
                    checkModal={false}
                    specialCloseModal={false}
                />
                <ImageVisualizer
                                    publicationid={query.publicationid}
                                    maxImages={this.state.publication.images}
                                    isFavourite={this.state.publication.favourite}
                                    page='Details'
                                    imageClass='imageSize'
                                    containerClass='img-with-tag mySlides'
                                    nextClass='next-image-details pointer centerArrow'
                                    previousClass='prev-image-details pointer centerArrow'
                                    setReady={this.setReady}
                                    index={0}
                />
            </div>
        );
    }
}

export default withRouter(withTranslation()(Details));

问题是在调用 UserService.sendMessage 后 showModal 设置为 true，这是可以的。模式出现。

但问题是，每当渲染被另一个函数或其他东西触发时，模式就会再次显示？出现后如何将 showModal 设置为 false？

Answer 1

尝试使用 setTimeout 来 setState showModal = false ，如下所示

if (Object.keys(errors).length === 0) {
  this.setState({
    loading: true,
    showModal: false,
  });

  UserService.sendMessage(emailDTO).then(function (response) {
    currentComponent.setState({
      loading: false,
      showModal: true, // This works fine, but it turns out the modal then gets shown after every render
    });
    setTimeout(() => {
      currentComponent.setState({
        showModal: true,
      });
    }, 200);
  });
}