Javascript React js中的React引导SweetAlert不工作

我正在尝试使用

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;

---

请注意，您不应使用新状态分配

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;

import React，{Component}来自'React'；
从“react引导SweetAlert”导入SweetAlert；
类Hero扩展组件{
建造师（道具）{
超级（道具）；
此.state={
警告：错误，
};
}  
showAlert=（）=>{
这是我的国家({
警报：是的，
})
};
render（）{
返回(
图书交换
注销
{ 
this.state.alert&&
}
);
}
};
导出默认英雄；

嗨！欢迎来到StackOverflow。你提出了一个很好的问题，除了一点：你应该克制自己，不要仅仅要求社区帮助你。相反，展示你所做的；你会犯什么错误；期望的行为是什么；然后，准确地陈述你的问题。这将提高你被回答的机会。

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;