Javascript TypeError:无法读取属性'；设置状态'；在sweetAlert中未定义的

我正在开发一个简单的crud应用程序，该程序将数据输入并填充到react表中，并且它具有简单的添加和删除crud操作

但是我得到了这个错误：TypeError:无法读取未定义的属性'setState'

import SweetAlert from "react-bootstrap-sweetalert";

然后写了一个方法：（在课外）

constsuccessalert=（）=>{
console.log（“alertttttttttttttttttt”）；
这是我的国家({
警报：(
你点击了按钮！
),
});
};

这是我在课堂上的发言：

constructor(props) {
super(props);
this.state = {
  alert: null,
  data: dataTable.map((prop, key) => {
    return {
      id: key,
      name: prop[0],
      position: prop[1],
      office: prop[2],
      age: prop[3],
      actions: (
        <div className="actions-right">
          <Button
            fill="true"
            onClick={() => {
              var data = this.state.data;
              data.find((o, i) => {
                if (o.id === key) {
                  data.splice(i, 1);
                  console.log(data);
                  console.log(i);
                  return true;
                }
                return false;
              });
              successAlert();
              this.setState({
                data: data,
              });
            }}
            color="danger"
            size="sm"
            className="btn-icon btn-link remove"
            id="tooltip974171201"
          >
            <i className="fa fa-times" />
          </Button>
          <UncontrolledTooltip
            delay={0}
            target="tooltip974171201"
            placement="top"
          >
            Delete this record
          </UncontrolledTooltip>
        </div>
      ),
    };
  }),
};

构造函数（道具）{
超级（道具）；
此.state={
警报：空，
数据：dataTable.map（（属性，键）=>{
返回{
id:钥匙，
名称：道具[0]，
位置：道具[1]，
办公室：提案[2]，
年龄：道具[3]，
行动：(
{
var data=this.state.data；
data.find（（o，i）=>{
如果（o.id==键）{
数据拼接（i，1）；
控制台日志（数据）；
控制台日志（i）；
返回true；
}
返回false；
});
成功者（）；
这是我的国家({
数据：数据，
});
}}
color=“危险”
size=“sm”
className=“btn图标btn链接删除”
id=“工具提示974171201”
>
删除此记录
),
};
}),
};

---

}你提到了

（它在课堂之外）

。 这个关键字只在类中有作用域，因此它会给您错误信息。将该方法移到类中。 例：

this.state={
showAlert:错误
}
showarert（）{
this.setState（{showarter:true}）；
}
render（）{
返回(
你点击了按钮！
显示警惕
)
}

您提到了

（它在课堂之外）

。 这个关键字只在类中有作用域，因此它会给您错误信息。将该方法移到类中。 例：

this.state={
showAlert:错误
}
showarert（）{
this.setState（{showarter:true}）；
}
render（）{
返回(
你点击了按钮！
显示警惕
)
}

这很有效。但是警报框仍然没有出现。您不需要将整个组件设置为状态。将其保留在render方法中并设置布尔状态。哦。。你能不能把这一点看清楚？谢谢。我希望它只在点击按钮时弹出。现在，它是在页面呈现时加载的。这很有效。但是警报框仍然没有出现。您不需要将整个组件设置为状态。将其保留在render方法中并设置布尔状态。哦。。你能不能把这一点看清楚？谢谢。我希望它只在点击按钮时弹出。现在，它是在页面呈现时加载的。

constructor(props) {
super(props);
this.state = {
  alert: null,
  data: dataTable.map((prop, key) => {
    return {
      id: key,
      name: prop[0],
      position: prop[1],
      office: prop[2],
      age: prop[3],
      actions: (
        <div className="actions-right">
          <Button
            fill="true"
            onClick={() => {
              var data = this.state.data;
              data.find((o, i) => {
                if (o.id === key) {
                  data.splice(i, 1);
                  console.log(data);
                  console.log(i);
                  return true;
                }
                return false;
              });
              successAlert();
              this.setState({
                data: data,
              });
            }}
            color="danger"
            size="sm"
            className="btn-icon btn-link remove"
            id="tooltip974171201"
          >
            <i className="fa fa-times" />
          </Button>
          <UncontrolledTooltip
            delay={0}
            target="tooltip974171201"
            placement="top"
          >
            Delete this record
          </UncontrolledTooltip>
        </div>
      ),
    };
  }),
};

this.state = {
    showAlert: false
}

showAlert() {
    this.setState({ showAlert: true });
}

render() {
    return(
        <SweetAlert
        alert={this.state.showAlert}>
            You clicked the button!
        </SweetAlert>
        <button onClick={this.showAlert.bind(this)}>Show Alert</button>
    )
}