React Bootstrap React js 中的 SweetAlert 不工作

Question

我正在尝试使用 sweetalert 创建注销按钮。我创建了一个注销功能，它在没有 sweetalert 的情况下也能完美运行。但是当我添加 sweetalert 按钮时它停止工作。

这是我的代码。请帮助我...

import React, {Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';

class Hero extends Component {

    constructor(props) {
        super(props);

        this.state = {
            alert: null
        };
    }  

    showAlert = () => (
            this.setState = ({
                alert: (
                    <SweetAlert
                    title="Here's a message!"
                    onConfirm={this.props.handleLogout}
                    onCancel={this.onCancel}
                    showCancel={true}
                    focusCancelBtn={true}
                    />
                )
            })
            
        );

    render(){
        return (
            <section className = "hero">
                <nav>
                    <h2>Book Exchange</h2>
                    <button onClick = {() => this.showAlert()}>Logout</button>
                </nav>
            </section>
        );
    }
};
export default Hero;

我的 handleLogout 函数在下面，它在没有 sweetalert 的情况下工作得很好。我正在使用 firebase 进行身份验证。

const handleLogout = () => {
  fire.auth().signOut()
};

Answer 1

请注意，您不应将新状态分配给 setState，而应将其作为函数执行。

然后您可以尝试有条件地呈现警报，如下所示：

import React, {Component } from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';

class Hero extends Component {

    constructor(props) {
        super(props);

        this.state = {
            alert: false,
        };
    }  

    showAlert = () => {
      this.setState({
        alert: true,
      })
    };

    render(){
        return (
          <>
            <section className = "hero">
                <nav>
                    <h2>Book Exchange</h2>
                    <button onClick = {this.showAlert}>Logout</button>
                </nav>
            </section>
            { 
                this.state.alert && <SweetAlert
                    title="Here's a message!"
                    onConfirm={this.props.handleLogout}
                    onCancel={this.onCancel}
                    showCancel={true}
                    focusCancelBtn={true}
                    />
             }
            </>
        );
    }
};
export default Hero;

React Bootstrap React js 中的 SweetAlert 不工作

React Bootstrap SweetAlert in React js not working

javascript

firebase

reactjs

sweetalert

sweetalert2